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获取子节点和父节点的示例代码
Sep 10 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 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 调用远程url的六种方法小结
2009/11/02 PHP
JavaScript学习笔记(十)
2010/01/17 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
python 输出一个两行字符的变量
2009/02/05 Python
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
python http接口自动化脚本详解
2018/01/02 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
python中if嵌套命令实例讲解
2021/02/25 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
Delphi软件工程师试题
2013/01/29 面试题
优秀大学生职业生涯规划书
2014/02/27 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
欠条格式范本
2015/07/03 职场文书
如何写好活动总结
2019/06/21 职场文书
PHP中多字节字符串操作实例详解
2021/08/23 PHP
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS