动态限制输入框的最大长度

linb

跨浏览器的情况下，限制textarea输入框中文字的长度是一件不容易的事情。你需要至少考虑3点：
1.通过键盘输入字符；
2.通过paste输入（control+v 或 右键菜单）；
3.通过拖拽输入文字；

在longboo中，可以用以下思路（通过同步和异步的处理）来达到动态限制文字输入的目的：

1. Class('App', 'linb.Com',{
   
2.     Instance:{
   
3.         autoDestroy:true,
   
4.         iniComponents:function(){
   
5.             // [[code created by jsLinb UI Builder
   
6.             var host=this, children=[], append=function(child){children.push(child.get(0))};
   
7. 
   
8.             append((new linb.UI.Input)
   
9.                 .host(host,"input555")
   
10.                 .setLeft(100)
    
11.                 .setTop(80)
    
12.                 .setHeight(100)
    
13.                 .setMultiLines(true)
    
14.                 .setDynCheck(true)
    
15.                 .onChange("_input555_onChange")
    
16.                 .beforeKeypress("_input555_bk")
    
17.             );
    
18. 
    
19.             return children;
    
20.             // ]]code created by jsLinb UI Builder
    
21.         },
    
22.         // 同步：防止用键盘直接敲入
    
23.         _input555_bk:function(profile, caret, key, control, shift, alt) {
    
24.             if(key.length==1){
    
25.                 if(control && (key=='c'||key=='x'||key=='a'))
    
26.                     return true;
    
27. 
    
28.                 var len=profile.boxing().getUIValue().length - (caret[1]-caret[0]);
    
29.                 if (len >= 10)
    
30.                     return false;
    
31.             }
    
32.         },
    
33.         // 异步：防止用paste或drop的方式输入
    
34.         _input555_onChange:function (profile, oldValue, newValue) {
    
35.             if (newValue.length > 10)
    
36.                 profile.boxing().setUIValue(newValue.substr(0,10),true);
    
37.         }
    
38.     }
    
39. });

复制代码

linb

对于multilines=false的 (对应html input type="text" or type="password")，只需要用

setMaxlength(10)即可。

对于multilines=true的 (对应html input type="textarea")，必须要用以上方法。