js 限制表单输入长度汉字为两个字符

更新时间：2011年07月13日 20:00:27 作者：

该效果是继检测表单输入长度显示剩余可输入字数之后，在他的基础上整合的小有差别的一个效果，希望方便朋友们使用。

将该效果整合成了一个函数，此函数接受3个参数：
第一个为textarea或其他text表单的ID；
第二个为显示输入内容的ID，可留空；
第三个为最多输入的字符，一个汉字为2个字符。
这只是一个基础效果，欢迎同学们进行优化和改进。
要获取代码请查看demo的源文件

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>限制表单输入长度 汉字为两个字符</title> <meta name="auther" content="f7" /> <script> function lengthLimit(elem, showElem, max){ var elem = document.getElementById(elem); var showElem = document.getElementById(showElem); var max = max || 50;// 最大限度字符，汉字按两个字符计算 function getTextLength(str){// 获取字符串的长度 一个汉字为2个字符 return str.replace(/[^\x00-\xff]/g,"xx").length; }; // 监听textarea的内容变化 if(/msie (\d+\.\d)/i.test(navigator.userAgent) == true) {// 区分IE elem.onpropertychange = textChange; }else{ elem.addEventListener("input", textChange, false); } function textChange(){// 内容变化时的处理 var text = elem.value; var count = getTextLength(text); if(count > max){// 文字超出截断 for(var i=0; i<text.length; i++){ if(getTextLength(text.substr(0, i)) >= max){ elem.value = text.substr(0, i); if(showElem) showElem.innerHTML = elem.value;// 显示输出结果 break; }; } }else{ if(showElem) showElem.innerHTML = elem.value;// 显示输出结果 }; }; textChange();// 加载时先初始化 }; </script> </head> <body> <textarea name="textarea" id="commentText" style="width:500px; height:150px;"></textarea> 最多输入20个汉字 <input type="button" value="JS添加内容" onclick="document.getElementById('commentText').value = '您想说dasdsadsad的话！请输5325135353入您想说的'; lengthLimit('commentText', 'dsa', 40);" /> <div id="dsa"></div> <script type="text/javascript"> lengthLimit("commentText", "dsa", 40); </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

表单输入长度

javascript实现的左右选择框效果代码
javascript实现的左右选择框效果代码...
2007-10-10
js 获取子节点函数 (兼容FF与IE)
兼容FF与IE的获取子节点的js代码，需要的朋友可以参考下，我们刚不发布的dom操作文章。
2010-04-04
js select多选列表传值代码
select多选列表传值，主要是读取选中的值，然后传递到对面的select中，每个功能都是独立的代码。
2009-12-12
javascript select options 排序(保持option 对象完整性)
select options 排序(保持option 对象完整性)
2010-03-03
用javascript判断输入数据是否货币并自动添加￥符号的代码
用javascript判断输入数据是否货币并自动添加￥符号的代码...
2007-08-08
IE中checkbox在刷新后初始化的问题
在项目中有一个需求，要求页面中的checkbox在页面刷新或后退时都要重新初始化，即处于未选中的状态，不保存之前的状态。
2010-01-01
Javascript 文本框textarea高度随内容自适应增长收缩
之前一段时间项目中用到的一个功能，用Javascript控制文本框textarea高度随内容自适应增长收缩，今天花了点时间换了种实现方法，总结一下。
2011-07-07
js onpropertychange输入框事件获取属性
onpropertychange主要是可以实时获取用户的修改等事件。
2009-03-03
Javascript实现图片不间断滚动的代码
这篇文章主要分享一段js图片不间断滚动的代码,蛮优秀的,需要的朋友可以参考下。
2016-06-06
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
多个元素(RADIO,CHECKBOX等)是否被选择，常用的就是下面的方法，大家可以研究下。
2009-02-02