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 相关文章推荐
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
js 异步处理进度条
Apr 01 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
jQuery each函数源码分析
May 25 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
JS数组的常用方法整理
Mar 31 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/03 咖啡文化
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
javascript验证身份证号
2015/03/03 Javascript
js实现继承的5种方式
2015/12/01 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
从零学Python之入门(五)缩进和选择
2014/05/27 Python
提升Python程序运行效率的6个方法
2015/03/31 Python
Python常见字典内建函数用法示例
2018/05/14 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
Django url 路由匹配过程详解
2021/01/22 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
平面设计师岗位职责
2014/09/18 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
教师节大会主持词
2015/07/06 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
同学联谊会邀请函
2019/06/24 职场文书