經常會碰到在輸入的時候需要限制輸入的字數（長度），如果用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
破繭而出 閱讀(2411)
評論(5) 編輯 收藏 所屬分類:
JavaScript