在工作当中，我们经常会遇到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>
运行效果：
开发过程中的相关知识点小结：
1. 也可用oninput、onpropertychange事件处理
a) 用onpropertychange的话，只要当前对象属性发生改变，都会触发事件，但是它是IE专属的
b) oninput是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效
2. onchange只有当前对象失去焦点(onblur)时才会触发，达不到实时的要求。另外，onchange的当前对象属性改变，只能是由键盘或鼠标事件激发的（脚本触发无效）
3. <input> 标签的 maxlength 属性，规定输入字段的最大长度，以字符个数计。
4. JavaScript charAt() 方法，返回指定位置的字符。JavaScript 并没有一种有别于字符串类型的字符数据类型，所以返回的字符是长度为1的字符串。
相关推荐
首先，`Jquery 限制文本框录入长度（字符或字节）实例`这个标题暗示我们将探讨一个具体的实践案例，该案例通过 jQuery 监听文本框的输入事件，实时计算剩余可输入的字符或字节数，并在超出限制时阻止进一步的输入。...
在请求的回调函数中，我们可以更新UI，显示剩余可输入的字符数或者错误提示。 PHP脚本可能包含了以下步骤： 1. 检查请求是否合法，防止跨站请求伪造（CSRF）。 2. 接收并处理前端发送的数据。 3. 计算字符串长度，...
在JavaScript编程中，有时我们需要对用户输入的字符串长度进行限制，比如在文本框中限制用户输入的字符数不超过特定值，同时实时显示剩余可输入的字数。在给出的实例代码中，它实现了一个功能，即当用户在文本框中...
在本文中，我们将深入了解如何动态统计输入内容的字节和字符数。这个功能在网络应用中尤其常见，比如在限制短信发送字数或者实时显示文本编辑器中的字符数时就会用到。通过使用JavaScript编程语言，我们可以实现这一...
标题描述了一个具体的编程任务，即需要编写JavaScript代码来实现判断输入字符串长度的功能，并且指定了中文字符和英文字符、数字在长度计算上存在差异，即中文字符占用两个字节。 在描述中，作者提到了这段代码的...
#### 一、JavaScript字符集 JavaScript采用了Unicode字符集编码。选择Unicode的主要原因是16位的Unicode编码可以表示几乎所有的书面语言，这为JavaScript提供了强大的国际化支持。例如，可以使用中文或其他语言编写...
本实例提供了一种方法，用于根据字节长度来截取字符串，并在必要时添加省略号，以达到对过长字符串的适配。 `autoAddEllipsis`函数是主要的接口，它接收两个参数：`pStr`表示待处理的字符串，`pLen`表示要截取的...
2. **JavaScript逻辑编写**：接着，我们编写JavaScript函数来监控用户输入，并实时计算当前输入的字符数。如果超过了限制，则自动截断输入。 3. **字符计数算法**：这里的关键在于如何准确计算字符串的字节数。我们...
MD5（Message-Digest Algorithm 5）则是另一种著名的哈希函数，它产生一个128位（16字节）的哈希值，通常以32个十六进制字符表示。尽管MD5在过去的几年中被认为安全性较低，因为它容易产生碰撞（不同的输入产生相同...
在JavaScript编程语言中，实现中文转拼音的功能是一个常见的需求，特别是在前端开发中，例如创建一个网页工具，允许用户输入中文并获取对应的拼音。这个过程涉及到字符编码、Unicode和中文字符到拼音的映射。以下是...
实例32 用字符输入流读取文件 实例33 用字符输出流写文件 实例34 随机读取文件程序示例 实例35 故事接龙 实例36 文件上传 实例37 在浏览器中打开文件 实例38 文件下载 实例39 用jspSmartUpload组件实现文件...
在JavaScript中实现`encode64`通常涉及将字节序列转换为Base64字符，Base64字符集由64个不同的字符组成，包括大小写字母、数字以及`+`和`/`。 在这个实例中，`encode64`算法的实现使用了一个预定义的Base64字符映射...
实例156 限制多行文本域输入的字符个数 187 实例157 设置文本框的只读属性 188 实例158 自动计算金额 189 实例159 为文本框设置默认值 190 实例160 设置文本框的样式 191 实例161 文本域的滚动条 192 3.3 下拉列表的...
实例32 用字符输入流读取文件 实例33 用字符输出流写文件 实例34 随机读取文件程序示例 实例35 故事接龙 实例36 文件上传 实例37 在浏览器中打开文件 实例38 文件下载 实例39 用jspSmartUpload组件实现文件...
为了实现上述需求，我们需要在Vue实例中定义计算属性来动态计算输入内容的字符数和字节数。字符数的计算比较直接，直接返回输入字符串的长度。而字节数的计算则需要使用正则表达式来判断哪些字符是非ASCII字符，并将...
实例156 限制多行文本域输入的字符个数 187 实例157 设置文本框的只读属性 188 实例158 自动计算金额 189 实例159 为文本框设置默认值 190 实例160 设置文本框的样式 191 实例161 文本域的滚动条 192 3.3 下拉列表的...
这些知识点涵盖了前端开发中表单验证的基础原理和实现方式，尤其对于需要精确控制字符和字节输入长度的场景非常有用，比如在开发需要本地化处理的网站时，正确地处理中文字符的输入限制是必不可少的。通过以上知识点...