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 相关文章推荐
onpropertypchange
Jul 01 Javascript
jQuery-ui中自动完成实现方法
Jun 10 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
JavaScript实现与web通信的方法详解
Aug 07 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
短波问题解答
2021/02/28 无线电
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
bootstrap改变按钮加载状态
2014/12/01 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
TensorFlow实现RNN循环神经网络
2018/02/28 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
机电一体化专业应届本科生求职信
2013/09/27 职场文书
打架检讨书800字
2014/01/10 职场文书
干部行政关系介绍信
2014/01/17 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书