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 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 Javascript
vue使用canvas实现移动端手写签名
Sep 22 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 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/03/02 无线电
PDO::_construct讲解
2019/01/27 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
javascript parseInt与Number函数的区别
2010/01/21 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
大韩航空官方网站:Korean Air
2017/10/25 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
婚庆答谢词
2015/01/04 职场文书
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android