KiMoGiGi 技术文集

不在乎选择什么,而在乎坚持多久……

IT博客 首页 联系 聚合 管理
  185 Posts :: 14 Stories :: 48 Comments :: 0 Trackbacks
最近开发一个项目,有一个新闻的模块,用户需要对标题进行控制,希望在输入的时候就不允许超过规定的字数,而不是提交到服务器再判断。
显然,这只能使用javascript来完成这一艰巨的任务了。
首先,既然要限制字数,肯定要想办法实时获取用户在文本框里输入的文字的数量。input控件有个length的属性,可以方便地获取字数。可是,它所返回的字数无论是中文还是英文或者数字,1个字就算1个字。客户要限制字数的原因是为了页面显示的时候排版不会乱,因此一个汉字需要按2个英文字符来计算。这样的话,这个默认的length就无用武之地了。
怎么区分中文和英文呢?查阅了一下资料,string对象有一个叫charCodeAt(index)的方法,可以获取字符串中某一个字符的编码。我们都知道,字母数字的ascii编码都小于255而汉字的编码肯定大于255,因此我们可以使用此方法来判断字符串占用多少英文字符的宽度。
function GetCharLength(str)
{
 var iLength = 0;
 for(var i = 0;i<str.length;i++)
 {
 if(str.charCodeAt(i) >255)
 {
 iLength += 2;
 }
 else
 {
 iLength += 1;
 }
 }
 return iLength;
}

字数统计有了,接下去我们需要实时地捕获用户的输入。我们可以采取在input文本框的onkeyup事件中加入字符串检测函数的调用即可。
在检测完字符长度后,对于那些超长的,我们将采用自后往前截断的方法将多余的字符去除。
字符截断代码如下:
function CutStr(Str,Len)
{
 var CurStr = "";
 for(var i = 0;i<Str.length;i++)
 {
 CurStr += Str.charAt(i);
 if(GetCharLength(CurStr )>Len)
 {
 return Str.substring(0,i);
 }
 }
 return CurStr ;
}
至此,一个简单的限制用户输入字符数的方案完成了。
接下去,我们考虑一些改进。
1、javascript中,可以使用正则表达式来搜索字符串里的字符并替换,我们可以用此方法来获取字符串占用的宽度,代码如下:
String.prototype.len=function(){
return this.replace(/[^\x00-\xff]/g,"**").length;
}
这段代码为string对象建立了一个len的属性,用户可以直接使用string.len来获取字符串所占用的宽度。在这里,我们使用了一个小技巧,通过正则表达式将编码在255以外的字符换成2个*,这样就可以统计了。
其实这个replace还有其它用法,比如要限制用户只能输入数字,可以使用
<input onChange="value=value.replace(/[^\d]/g,'')" >
只能输入数字和英文 /[\W]/g
只能输入汉字的 /[^\u4E00-\u9FA5]/g

2、微软拼音输入法对keyup事件很敏感,在某些情况下会把文本框里原有的字符全部去除(其实,主要因为用微软拼音输入法,虽然中文字没有上去,但是拼音字母已经作为内容存在文本框内,从而会激发判断函数。而一旦拼音比较长,会使字符超长,产生截断操作。因为是重写了框里的文本,截断操作之后,光标将移到最后一位,从而导致整个输入法的异常)
发现这个问题后,我又测试了其它一些输入法,发现这些输入法输入中文的方式各不一样,微软全拼输入法和智能ABC输入法也不同。考虑到还有其它各种输入法,因此采用在焦点移出的时候onBlur进行判断和截断操作。这样是最安全的。

以下是完整的代码:
<script language="javascript">
<!--
 
String.prototype.len=function(){
return this.replace(/[^\x00-\xff]/g,"**").length;
}
 
//Set maxlength for multiline TextBox
function setMaxLength(object,length)
{
 
 var result = true;
 var controlid = document.selection.createRange().parentElement().id;
 var controlValue = document.selection.createRange().text;
 var tempString=object.value;
 
 var tt="";
 for(var i=0;i<length;i++)
 {
 if(tt.len()<length)
 tt=tempString.substr(0,i+1);
 else
 break;
 }
 if(tt.len()>length)
 tt=tt.substr(0,tt.length-1);
   object.value=tt;
}
 
//Check maxlength for multiline TextBox when paste
function limitPaste(object,length)
{
 var tempLength = 0;
 if(document.selection)
 {
 if(document.selection.createRange().parentElement().id == object.id)
 {
 tempLength = document.selection.createRange().text.len();
 }
 }
 var tempValue = window.clipboardData.getData("Text");
 tempLength = object.value.len() + tempValue.len() - tempLength;
 
 if (tempLength > length)
 {
 tempLength -= length;
 var tt="";
 for(var i=0;i<tempValue.len()-tempLength;i++)
 {
 if(tt.len()<(tempValue.len()-tempLength))
 tt=tempValue.substr(0,i+1);
 else
 break;
 }
 if(tt.len()<=0)
 {
 window.event.returnValue=false;
 
 }
 else
 {
 tempValue=tt;
 window.clipboardData.setData("Text", tempValue);
 window.event.returnValue = true;
 }
 }
 
 
}
 
function PressLength()
{
 
 if(event.srcElement.type=="text" || event.srcElement.type=="textarea" )
 {
 if(event.srcElement.length!=null)
 setMaxLength(event.srcElement,event.srcElement.length);
 
 }
}
 
function LimitLength()
{
 
 if(event.srcElement.type=="text" || event.srcElement.type=="textarea" )
 {
 if(event.srcElement.length!=null)
 limitPaste(event.srcElement,event.srcElement.length);
 }
}
document.documentElement.attachEvent('onBlur', PressLength);
document.documentElement.attachEvent('onpaste', LimitLength);
 
//-->
 </script>


From http://www.gaozhe.net/article.asp?id=11
posted on 2007-02-02 00:56 KiMoGiGi 阅读(4510) 评论(5)  编辑 收藏 引用 所属分类: JavaScript

评论

# re: 如何限制用户在文本框输入的字数fffff 2010-04-27 10:33 ffffffffff
fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff  回复  更多评论
  

# re: 如何限制用户在文本框输入的字数 2011-05-09 12:10 fsdfaasd
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd  回复  更多评论
  

# re: 如何限制用户在文本框输入的字数 2014-05-08 21:44
越来越大不堪一击 无缘无故   回复  更多评论
  

# re: 如何限制用户在文本框输入的字数 2015-12-16 17:05 从长春
如果过分的四大名死定了开发了速度快麻烦了开始打疯了快死掉了付款速度慢了分开收到了开发出死定了 放大放大看附件的看法 开发的开发了贷款发到了饭店开发   回复  更多评论
  

# re: 如何限制用户在文本框输入的字数 2015-12-16 17:05 从长春
付费即可,v弩箭疯狂的v名成年的减肥开幕词发到空间活动扣积分能淡定是空间烦恼多思考  回复  更多评论
  

只有注册用户登录后才能发表评论。