ExtJS4 - 文本框之 maxLength ,阻止用户输入过多的字符

各位使用过ExtJs4的小伙伴应该知道,设置了文本框的 maxLength 后,该属性仅能起到验证的作用,不能阻止用户输入过多的字符

而在普通html文本框中,设置了文本框的 maxLength 后,用户无法输入更多的字符,不管是键盘输入,还是粘贴


如果希望前者达到后者的效果,有两种方法:

1. 设置该文本框的 inputAttrTpl 属性,这仅对该文本框起效,示例:

    inputAttrTpl: "maxLength=50"

2. 修改ExtJS源码,这可以对所有的文本框起效

    ext-all-***.js

    找到: Ext.cmd.derive("Ext.form.field.Text" 代码片段,向下找到其 initComponent 方法,在方法最前面加上一段代码,修改后如下:

initComponent : function() {
// 处理 text 的 maxLength
var maxLen = this.maxLength!=null && this.maxLength
if(maxLen!=null && !isNaN(maxLen)) {
var inAttr = this.inputAttrTpl;
var s = " maxLength='"+this.maxLength+"'";
if(inAttr==null || inAttr=="") {
inAttr = s;
} else if(Ext.isString(inAttr) && inAttr.indexOf(s)<0) {
inAttr = inAttr+s;
} else if(Ext.isArray(inAttr)) {
var flag = false;
var len= inAttr.length;
for(var i=0;i
if((""+inAttr[i]).indexOf(s)>=0) {
flag = true;
break;
}
}
if(!flag) {
inAttr.push(s);
}
} else {
// TODO: XTemplate 暂处理为:调用者自己定义 XTemplate: maxLength='...'
}
this.inputAttrTpl = inAttr;
}


                ...

    

   

对于 inputAttrTpl 被设置为 Ext.XTemplate 类型的情况,我暂没尝试出解决办法,这种情况比较少见,如果有,暂时只能请调用者在定义 inputAttrTpl  时,将 maxLength=... 加入进去;

如果有哪位小伙伴解决了这个问题,或者另外有更好的方案,请跟帖

你可能感兴趣的:(ExtJS4)