Extjs 限制 textfield / textarea 输入字数 , 兼容 IE Firefox Chrome

 

Extjs 限制 textfield / textarea 输入字数 , 兼容 IE Firefox Chrome

标签： extjs 中文输入extjs 字段最大长度

2012-06-22 16:58  7783人阅读  评论(5)  收藏  举报

  分类：

ExtJS（15） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

        Extjs 中的 textfield 控件，可以通过设置 maxLength 属性来限制输入最大字符长度，但是默认情况下如果输入的长度超过设定的最大长度时，会自动出现小红框提示输入错误(超过最大字符长度)，而不会阻止你输入其它超过设定最大长度的字符。

        另外，textfield 也没有考虑输入中文的情况，也就是说它会把输入的一个中文字当成一个字符，这样就会产生错误，试想下，有一个字段在数据库中的最大长度为10，你可以在界面上设置它对应的 textfield 的 maxLength 为 10，如果把输入的一个中文字当成一个字符，那么就会允许输入10个中文字，那么保存的时候就会出现错误。

        经过测试，使用下面的代码可以阻止用户输入，如果超过了设定的最大字符长度(包括中文) 。主要的原理就是监视用户的每一次 keyup 动作，然后看看当前控件内输入的内容所占的长度是否超过设定的最大长度，如果超过的话，则要截取掉超出的字符。

[javascript]  view plain  copy

 print ?

1. if(document.addEventListener){  
2.     document.addEventListener('keyup',LimitInput, true);  
3. }else{  
4.     document.attachEvent('onkeyup', LimitInput);   
5. }  

[javascript]  view plain  copy

 print ?

1. function LimitInput(event) {   
2.     var event = window.event || event;  
3.     if (window.event) {  
4.         if(event.srcElement.maxLength != null && event.srcElement.maxLength > 0 && event.srcElement.maxLength < 1000) {         
5.             if(event.srcElement.type=="text" || event.srcElement.type=="textarea" ) {   
6.                 setMaxLength(event.srcElement,event.srcElement.maxLength);   
7.             }  
8.         }   
9.     } else {  
10.         if(event.originalTarget.type=="text" || event.originalTarget.type=="textarea" ) {   
11.             if(event.originalTarget.maxLength != null && event.originalTarget.maxLength > 0) {  
12.                 setMaxLength(event.originalTarget,event.originalTarget.maxLength);   
13.             }  
14.         }   
15.     }  
16. }  

[javascript]  view plain  copy

 print ?

1. function getFieldRealLength(str) {  
2.     var sum = 0;  
3.     for (var i = 0; i < str.length; i++) {  
4.         if ((str.charCodeAt(i) >= 0) && (str.charCodeAt(i) <= 255)) {  
5.             sum = sum + 1;  
6.         } else {  
7.             sum = sum + 3; // oracle 数据库字符集设置为 AL32UTF8,一个汉字占3个字符  
8.         }  
9.     }  
10.     return sum;  
11. }  

[javascript]  view plain  copy

 print ?

1. function setMaxLength(object, length) {  
2.     var tempStr = object.value;  
3.     var tt = "";  
4.       
5.     if (getFieldRealLength(tempStr) <= length) {  
6.         return;  
7.     } else {  
8.         for (var i = 0; i < length; i++) {  
9.             if (getFieldRealLength(tt) < length) {  
10.                 tt = tempStr.substr(0, i + 1);  
11.             } else {  
12.                 break;  
13.             }  
14.         }  
15.         if (getFieldRealLength(tt) > length) {  
16.             tt = tt.substr(0, tt.length - 1);  
17.         }  
18.     }  
19.       
20.     object.value = tt;  
21. }