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

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

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

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

if(document.addEventListener){
    document.addEventListener('keyup',LimitInput, true);
}else{
    document.attachEvent('onkeyup', LimitInput); 
}


function LimitInput(event) { 
	var event = window.event || event;
	if (window.event) {
		if(event.srcElement.maxLength != null && event.srcElement.maxLength > 0 && event.srcElement.maxLength < 1000) {	    
	    	if(event.srcElement.type=="text" || event.srcElement.type=="textarea" ) { 
	            setMaxLength(event.srcElement,event.srcElement.maxLength); 
	        }
	    } 
	} else {
		if(event.originalTarget.type=="text" || event.originalTarget.type=="textarea" ) { 
	        if(event.originalTarget.maxLength != null && event.originalTarget.maxLength > 0) {
	            setMaxLength(event.originalTarget,event.originalTarget.maxLength); 
	        }
	    } 
	}
}


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


function setMaxLength(object, length) {
	var tempStr = object.value;
	var tt = "";
	
	if (getFieldRealLength(tempStr) <= length) {
		return;
	} else {
		for (var i = 0; i < length; i++) {
			if (getFieldRealLength(tt) < length) {
				tt = tempStr.substr(0, i + 1);
			} else {
				break;
			}
		}
		if (getFieldRealLength(tt) > length) {
			tt = tt.substr(0, tt.length - 1);
		}
	}
	
	object.value = tt;
} 



 

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值