JavaScript实现实时提示可输入字符字节数的实例-优快云博客

本文链接：https://blog.youkuaiyun.com/wjxbj/article/details/84437972

本文介绍了一种使用JavaScript实现的字节长度判断方法，能够准确处理包含汉字在内的各种字符，确保用户输入符合指定长度限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在工作当中，我们经常会遇到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>

运行效果：

开发过程中的相关知识点小结：