js限制文本框输入长度两种限制方式限制文本框输入长度两种限制方式(长度、字节数长度、字节数)
在实际应用中根据需要会用到文本框限制字符长度,以些新手朋友有们可能还不清楚如何应付，本人搜集整理了
一些常用技巧，晒出来和大家分享一下，希望可以帮助你们
功能功能/特点特点：
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>
资源评论
