input textarea文本框长度限制（包括中文字符）

seam项目中涉及到textarea文本框输入，为了限制输入的长度，可以用js限制，实现类似twitter输入的功能，实现如下：

页面空间代码：

 

                <h:inputTextarea id="deviceDesc"
                               cols="60"
                               rows="3"
                              value="#{xHome.instance.deviceDesc}" 
                              onkeydown="chkTextareaLen(this.id,'counterDeviceDesc',255);" 
                              onkeyup="chkTextareaLen(this.id,'counterDeviceDesc',255);"/>
                <br/>可以输入<span id="counterDeviceDesc" class="required">255</span>个字节

 

js代码：

 

/**
*textarea文本框输入字数检测
*textareaId：textarea的dom标识
*maxLen：要求的最大字节长度
*/
function chkTextareaLen(textareaId,counterId,maxLen) {
	try{
		var textareaValue = document.getElementById(textareaId).value;
		var curLen = 0,substrLen = 0;
		
	    for (var i=0; i<textareaValue.length; i++) {  
	        if (textareaValue.charCodeAt(i)>127 || textareaValue.charCodeAt(i)==94) {  
	        	curLen += 2;  
	        } else {
	        	curLen ++;  
	        } 
	
	        if(curLen > maxLen){
	        	substrLen = i;
	        	break;
	        }
	    }
	    
	    if(curLen > maxLen) {
		    if(substrLen == 0) substrLen = maxLen;
	    	document.getElementById(textareaId).value = textareaValue.substring(0,substrLen);
	        alert("文本长度不能大于"+maxLen+"个字节(中文占2个字节)"); 
	  	}else{
	    	document.getElementById(counterId).innerHTML = maxLen - curLen;
		}
	}catch(e){}
}

 

把js放着公共js文件中，可直接复用了。

 

 

评论

1 楼 fixsmall 2010-10-20  

onkeydown和onkeyup不支持中文输入