js限制文本框输入长度两种限制方式(长度、字节数)


Posted in Javascript onDecember 19, 2012

功能/特点
1.实时显示可输入的字数(字节数)
2.两种限制方式(长度、字节数)
3.中文输入法下可正常使用,无BUG
4.同一页面可以使用多个,相互不干扰
limit.js

function limit(){ 
var txtNote;//文本框 
var txtLimit;//提示字数的input 
var limitCount;//限制的字数 
var isbyte;//是否使用字节长度限制(1汉字=2字符) 
var txtlength;//到达限制时,字符串的长度 
var txtByte; 
this.init=function(){ 
txtNote=this.txtNote; 
txtLimit=this.txtLimit; 
limitCount=this.limitCount; 
isbyte=this.isbyte; 
txtNote.onkeydown=function(){wordsLimit()};txtNote.onkeyup=function(){wordsLimit()}; 
txtLimit.value=limitCount; 
} 
function wordsLimit(){ 
var noteCount=0; 
if(isbyte){noteCount=txtNote.value.replace(/[^/x00-/xff]/g,"xx").length}else{noteCount=txtNote.value.length} 
if(noteCount>limitCount){ 
if(isbyte){ 
txtNote.value=txtNote.value.substring(0,txtlength+Math.floor((limitCount-txtByte)/2)); 
txtByte=txtNote.value.replace(/[^/x00-/xff]/g,"xx").length; 
txtLimit.value=limitCount-txtByte; 
}else{ 
txtNote.value=txtNote.value.substring(0,limitCount); 
txtLimit.value=0; 
} 
}else{ 
txtLimit.value=limitCount-noteCount; 
} 
txtlength=txtNote.value.length;//记录每次输入后的长度 
txtByte=txtNote.value.replace(/[^/x00-/xff]/g,"xx").length; 
} 
}

页面调用:
<html> 
<body> 
<input id="txtNote" /> 
还可输入<input type="text" id="txtCount" />个字符 
</body> 
<mce:script type="text/javascript"><!-- 
var lim=new limit(); 
lim.txtNote=document.getElementById("txtNote"); 
lim.txtLimit=document.getElementById("txtCount"); 
lim.limitCount=20; 
lim.isbyte=true; 
lim.init(); 
// --></mce:script> 
</html>

文本框限制字符长度

<INPUT onkeydown=if(event.keyCode==13)event.keyCode=9 onkeyup="value=value.replace(/[^0-9- ]/g,'');" maxLength=11 >

上面这样写只能限制输入的一定是数字 和最大长度为11个字符 如何限制一定要输入11位 不能少也不能多
------解决方案--------------------------------------------------------
你确定上面的写法对吗。。。测试怎么通不过呢。。
不对吗 测试那里不对 这个现在只是限制输入一定是数字和11个字符
------解决方案--------------------------------------------------------
<INPUT onkeydown=if(event.keyCode==13)event.keyCode=9 onkeyup="value=value.replace(/[^0-9- ]/g,'');" maxLength=11 >

上面这样写只能限制输入的一定是数字 和最大长度为11个字符 如何限制一定要输入11位 不能少也不能多
------解决方案--------------------------------------------------------
<INPUT onkeydown=if(event.keyCode==13)event.keyCode=9 onkeyup="value=value.replace(/[^0-9- ]/g,'');" maxLength=11 >

上面这样写只能限制输入的一定是数字 和最大长度为11个字符 如何限制……
------解决方案--------------------------------------------------------
if(document.form.mobile.value=="") 
{ 
alert("您输入错误"); 
document.forma.mobile.focus(); 
return false; 
} 
else 
{ 
if(!/^\d{11}$.test(document.form.mobile.value)) 
{alert("您输入数字的位数不对"); 
document.forma.mobile.focus(); 
return false; 
} 
}

不知道这样行不行。。。
------解决方案--------------------------------------------------------
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>控制textarea的字符个数</title> 
<style> 
<!-- 
form{ 
padding:0px; 
margin:0px; 
font:14px Arial; 
} 
input.txt{ /* 文本框单独设置 */ 
border: 1px inset #00008B; 
background-color: #ADD8E6; 
} 
input.btn{ /* 按钮单独设置 */ 
color: #00008B; 
background-color: #ADD8E6; 
border: 1px outset #00008B; 
padding: 1px 2px 1px 2px; 
} 
--> 
</style> 
<script language="javascript"> 
function LessThan(oTextArea){ 
//返回文本框字符个数是否符号要求的boolean值 
return oTextArea.value.length < oTextArea.getAttribute("maxlength"); 
} 
</script> 
</head> 
<body> 
<form method="post" name="myForm1" action="addInfo.aspx"> 
<p><label for="name">请输入您的姓名:</label> 
<input type="text" name="name" id="name" class="txt" value="姓名" maxlength="10"></p> 
<p><label for="comments">我要留言:</label><br> 
<textarea name="comments" id="comments" cols="40" rows="4" maxlength="50" onkeypress="return LessThan(this);"></textarea></p> 
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn"> 
<input type="reset" name="btnReset" id="btnReset" value="Reset" class="btn"></p> 
</form> 
</body> 
</html>

------解决方案--------------------------------------------------------
HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>电话号码检测 </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content="Dsmart"> 
<meta name="Keywords" content=""> 
<meta name="Description" content=""> 
</head> 
<body> 
电话号码:<input id ="phone" type="value" onblur="checkPhone()"/> 
<script type="text/javascript"> 
function checkPhone(){ 
var phone = document.getElementById("phone").value; 
if(phone == ""){ 
alert("请输入号码"); 
}else if(!(/^\d{11}$/g.test(phone))){//限制输入11整数 
//}else if(!(/^13\d{9}$/g.test(phone)||(/^15[0-35-9]\d{8}$/g.test(phone))|| (/^18[05-9]\d{8}$/g.test(phone)))){ 
//用于检测用户输入的手机号码是否正确 验证13系列和150-159(154除外)、180、185、186、187、188、189几种号码,长度11位 
alert("请输入11整数"); 
}else{ 
alert("ok"); 
} 
} 
</script> 
</body> 
</html>

------解决方案--------------------------------------------------------
<INPUT onkeydown=if(event.keyCode==13)event.keyCode=9 onkeyup="value=value.replace(/[^0-9- ]/g,'');" maxLength=11 >

上面这样写只能限制输入的一定是数字 和最大长度为11个字符 如何限制……
这样是可以有个提示,但并没起到限制作用,,当输入少于11位 还是可以提交的,这个是不是要用js来控制的呢
Javascript 相关文章推荐
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
js获取url传值的方法
Dec 18 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
js实现简单的计算器功能
Jan 16 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
小程序实现长按保存图片的方法
Dec 31 Javascript
详解Vite的新体验
Feb 22 Javascript
ajax java 实现自动完成功能
Dec 19 #Javascript
JavaScript字符串String和Array操作的有趣方法
Dec 18 #Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 #Javascript
javascript jscroll模拟html元素滚动条
Dec 18 #Javascript
Android中资源文件(非代码部分)的使用概览
Dec 18 #Javascript
js获取单选框或复选框值及操作
Dec 18 #Javascript
JQuery触发radio或checkbox的change事件
Dec 18 #Javascript
You might like
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
javascript 动态添加事件代码
2008/11/30 Javascript
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
jQuery技巧总结
2011/01/01 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
公司营业员的工作总结自我评价
2013/10/05 职场文书
初中班级口号
2014/06/09 职场文书
英语系本科生求职信
2014/07/15 职场文书
通用员工手册范本
2015/05/14 职场文书
学校运动会感想
2015/08/10 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript
这样写python注释让代码更加的优雅
2021/06/02 Python
python实现双链表
2022/05/25 Python