JavaScript实现实时提示可输入字符字节数的实例

        在工作当中,我们经常会遇到JS或JAVA判断当前输入的字符长度是否在指定的范围,如“用户名必须小于20个字符”之类的,其实我们必须重视这里所说的字符,因为如果数据库的表结构长度是20的话,用户输入有汉字时,因为字符和字节的区别,一个全角的字符或一个汉字占两个字节,而一个半角的字符仅占一个字符,就会校验不到,从而导致操作数据库异常。

        下面就以一个JS实例说明通过JavaScript实现的字节判断实例,如下所示:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>JS Len</title>
</head>
<script>
	
	/**
	 * 获取该串真正的字符数,这里一个字符==一个字节
	 * 暂未考虑超过 16 位字符的处理
	 *
	 * @example 
	 * "中华富强".len() 结果:8
	 * "中国China".len() 结果:9
	 */
	 String.prototype.len = function(){ 
		return this.replace(/[^\x00-\xff]/g, "**").length;
	 }
	 
	/**
	 * 获取该串真正的字符数,这里一个字符==一个字节
	 * 暂未考虑超过 16 位字符的处理
	 *
	 * @example 
	 * "中华富强".len() 结果:8
	 * "中国China".len() 结果:9
	 * strlen 与 上面的 len 方法 效果一样
	 */
	 function strlen(str){
	     var len = 0;
	     for(var i=0;i<str.length;i++){
	         if (str.charCodeAt(i)>255) {
	        	 len += 2;
	         }else {
	        	 len++;
	         }
	     }
	     return len;
	 }
	 
	/**
	 * 判断传入的字符是否为全角 
	 * 
	 * pChar:字符 
	 * return:true:全角 ,false:半角
	 */
	 function isFull(pChar) {
	    if ((pChar.charCodeAt(0) > 255)) {  
	        return true;  
	    } else {
	        return false;  
	    }
	 }
     
	/**
	 * 取得指定长度的字符串 (注:半角长度为1,全角长度为2) 
	 *  
	 * pStr:字符串
	 * pLen:截取长度
	 * return: 截取后的字符串 
	 */
	 function cutString(pStr, pLen) {
		var strLen = pStr.length;  
		var cutString;
		var lenCount = 0;  
		if (strLen <= pLen/2) {  
		    cutString = pStr;
		}else {
			for(var i = 0; i < strLen ; i++) {  
	            if(isFull(pStr.charAt(i))) {  
	                lenCount += 2;  
	            } else {  
	                lenCount += 1;  
	            }
	            if (lenCount > pLen) {  
	                cutString = pStr.substring(0, i);  
	                break;  
	            } else if(lenCount == pLen) {  
	                cutString = pStr.substring(0, i + 1);  
	                break;
	            }
	        }
		}
		return cutString;
	 }
	 
	/**
	 * 点击输入框时判断输入框中是否是默认值,如是默认值则将输入框清空
	 */
	 function click_context_textarea(obj) {
	     if(obj.value==obj.defaultValue) {
	         obj.value="";
	     }
	     set_alert_context_comment();
	     return false;  
	 }
	
	/**
	 * 焦点离开输入框时,判断输入框中是否有录入,如没有录入则将置回默认值
	 */
	 function blur_context_textarea(obj) {  
	     if(obj.value=="") {  
	         obj.value= obj.defaultValue;
	     }
	     set_alert_context_comment();
	     return false;
	 }
	 
	/**
	 * 判断输入框的字节数,并更新提示信息
	 */
	 function set_alert_context_comment() {
		 var maxLen = 30;
	     var inputNum = document.getElementById("txtContent").value.len();
	     //var inputNum = strlen(document.getElementById("txtContent").value);
	     if (inputNum <= maxLen) {
	         var matchWords = document.getElementById("txtContent").value.length;
	         document.getElementById("promptInfo").innerHTML = "当前已经输入" + inputNum + "字节," + matchWords + "字符,还可以输入" + (maxLen - inputNum) + "字母,"+(Math.round(((maxLen-inputNum)/2)-0.5))+"汉字";
	     }
	     if (inputNum > maxLen) {
	         document.getElementById("txtContent").value = cutString(document.getElementById("txtContent").value, maxLen);  //如果超过预定字节,就截取到预定字节个字节数
	     }
	 }
	 
	/**
	 * 页面加载完成,调set_alert_context_comment方法进行提示信息的更新
	 */
	 window.onload=function() {
		 set_alert_context_comment();
	 };
</script>
<body>
	 <div>
	 	<strong>说明:</strong><br>
	 	此实例实现一个输入框的功能,在用户动态输入文字的时候,修改提示"当前已经输入X字节,X字符,还可以输入X字母,X汉字"<br>
	 	onkeyup事件可以支持输入动态更新、拷贝粘贴更新,且可以很好的支持IE、Firefox、Chrome
	 </div>
	 <br>
	 <!-- 
	 <textarea id="txtContent" name="txtContent" rows="10" cols="50" onblur="blur_context_textarea(this);" onfocus="click_context_textarea(this);" onpropertychange="set_alert_context_comment();" oninput="set_alert_context_comment();">请在此填写您宝贵的意见</textarea>
	 -->
	 <textarea id="txtContent" name="txtContent" rows="10" cols="50" onblur="blur_context_textarea(this);" onfocus="click_context_textarea(this);" onkeyup="set_alert_context_comment()">请在此填写您宝贵的意见</textarea>
	 <div id="promptInfo"></div>
</body>
</html>

        运行效果:
JavaScript实现实时提示可输入字符字节数的实例_第1张图片
        开发过程中的相关知识点小结:

1.       也可用oninputonpropertychange事件处理

a)         用onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的

b)        oninputonpropertychange的非IE浏览器版本,支持firefoxopera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效

2.       onchange只有当前对象失去焦点(onblur)时才会触发,达不到实时的要求。另外,onchange的当前对象属性改变,只能是由键盘或鼠标事件激发的(脚本触发无效)

3.       <input> 标签的 maxlength 属性,规定输入字段的最大长度,以字符个数计。

4.       JavaScript charAt() 方法,返回指定位置的字符。JavaScript 并没有一种有别于字符串类型的字符数据类型,所以返回的字符是长度为1的字符串。

你可能感兴趣的:(JavaScript,字符,字节)