经常会碰到在输入的时候需要限制输入的字数（长度），如果用maxlength属性的话它对待中英文是一样的。比如<input name="textfield" type="text" size="10" maxlength="10">这样可以输入十个字母比如1234567890，但是也可以输入十个汉字比如：一二三四五六七八九十，但是明显后面那十个汉字是char(20)，如果数据库中字段的属性是char(10)，那么多余的就会截掉甚至导致最后一个字符出现乱码。于是我就曾经用JS来提示和控制输入字符的长度。先看效果：
整个过程有三个步骤：
第一步：建立js文件(checkWord.js，其中的汉字用的是unicode编码)
function checkWord(len)
{
var src=window.event.srcElement;
var str=trim(src.value);
myLen=0;
i=0;
for(;(i<str.length)&&(myLen<=len);i++){
if(str.charCodeAt(i)>0&&str.charCodeAt(i)<128)
myLen++;
else
myLen+=2;
}
//var myLen=str.replace(/[^\x00-\xff]/g,"**").length;
var mydiv=document.getElementById("wordCheck");
if(myLen>len){
alert("\u60a8\u8f93\u5165\u7684\u5b57\u6570\u8fc7\u591a\uff0c\u8bf7\u91cd\u65b0\u8f93\u5165");
src.value=str.substring(0,i-1);
window.frames.wordFrame.document.write("<body style='margin-bottom:0px; margin-left:5px; margin-right:0px; margin-top:6px;'> <span style='font-family:??, Verdana, Lucida, Arial, Helvetica,sans-serif;font-size:14px;color:#036;'>\u60a8\u8fd8\u53ef\u4ee5\u8f93\u51650\u4e2a\u5b57\u7b26</span></body>");
window.frames.wordFrame.document.close();
}
else{
window.frames.wordFrame.document.write("<body style='margin-bottom:0px; margin-left:5px; margin-right:0px; margin-top:6px;'> <span style='font-family:\u5b8b\u4f53, Verdana, Lucida, Arial, Helvetica,sans-serif;font-size:14px;color:#036;'>\u60a8\u8fd8\u53ef\u4ee5\u8f93\u5165"+(len-myLen)+"\u4e2a\u5b57\u7b26</span></body>");
window.frames.wordFrame.document.close();
}
mydiv.style.visibility="visible";
var myx=0,myy=0;
var parent = src.offsetParent
while(parent){
myx += parent.offsetLeft;
myy += parent.offsetTop;
parent=parent.offsetParent;
}
mydiv.style.left=myx+5;
mydiv.style.top=myy-25;
}
function hiddWordDiv(){
document.getElementById("wordCheck").style.visibility="hidden";
} 第二步：在页面上加入下列代码
<script type="text/javascript" src="checkWord.js"></script>
……
<div style="position:absolute; width:155px;height=28px;z-index:100;border:#4298E1 solid 1px; background-color:#fff; visibility:hidden; FILTER: Alpha(opacity=85)" id="wordCheck">
<iframe name="wordFrame" frameborder="0" id="wordFrame" style="width:155px; height:28px;z-index:101;" scrolling="no">
</iframe>
</div>
注：这里用到iframe是因为页面的控件比如下拉列表会浮在层的上面，就算设置z-index也无效
第三步：在输入框中加入下列代码，例如：
<input type="text" size="70" maxlength="80" name="giftDescribe" onkeyup="javascript:checkWord(80)" onblur="javascript:hiddWordDiv()">posted on 2007-05-30 17:05
破茧而出 阅读(2393)
评论(5) 编辑 收藏 所属分类:
JavaScript