在工作当中，我们经常会遇到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的字符串。
相关推荐
主要介绍了js获取字符串字节数方法,实例总结了javascript字符串长度计算的相关技巧,需要的朋友可以参考下
实例32 用字符输入流读取文件 实例33 用字符输出流写文件 实例34 随机读取文件程序示例 实例35 故事接龙 实例36 文件上传 实例37 在浏览器中打开文件 实例38 文件下载 实例39 用jspSmartUpload组件实现文件...
实例156 限制多行文本域输入的字符个数 187 实例157 设置文本框的只读属性 188 实例158 自动计算金额 189 实例159 为文本框设置默认值 190 实例160 设置文本框的样式 191 实例161 文本域的滚动条 192 3.3 下拉列表的...
实例32 用字符输入流读取文件 实例33 用字符输出流写文件 实例34 随机读取文件程序示例 实例35 故事接龙 实例36 文件上传 实例37 在浏览器中打开文件 实例38 文件下载 实例39 用jspSmartUpload组件实现文件...
实例156 限制多行文本域输入的字符个数 187 实例157 设置文本框的只读属性 188 实例158 自动计算金额 189 实例159 为文本框设置默认值 190 实例160 设置文本框的样式 191 实例161 文本域的滚动条 192 3.3 下拉列表的...
addressbook.war JavaScript+XML实现通讯录的工程文件（可以直接在Tomcat下发布运行）。 addressbook.xml 记录通讯录的XML文件。 第14章（\c14） 示例描述：介绍JavaScript与Microsoft Office互操作的方法。 ...
实例156 限制多行文本域输入的字符个数 187 实例157 设置文本框的只读属性 188 实例158 自动计算金额 189 实例159 为文本框设置默认值 190 实例160 设置文本框的样式 191 实例161 文本域的滚动条 192 3.3 下拉列表的...
实例32 用字符输入流读取文件 实例33 用字符输出流写文件 实例34 随机读取文件程序示例 实例35 故事接龙 实例36 文件上传 实例37 在浏览器中打开文件 实例38 文件下载 实例39 用jspSmartUpload组件实现文件...
对要输入的字符串进行转换 对要输出的字符串进行反转换 对输入JS进行转换 寻找两个函数所有不同的元素 寻找两数组所有不同元素 得到文件类型 截取字符串中两个特定唯一字符之间的内容 截取指定长度字符串 ...
Java实现的FTP连接与数据浏览程序，实现实例化可操作的窗口。 部分源代码摘录： ftpClient = new FtpClient(); //实例化FtpClient对象 String serverAddr=jtfServer.getText(); //得到服务器地址 ...
实例28 File类常用方法示例 实例29 列出目录下所有的文件和文件夹 实例30 利用字节流读取文件中的内容 实例31 利用字节流把内容写入文件 实例32 用字符输入流读取文件 实例33 用字符输出流写...
Java实现的FTP连接与数据浏览程序，实现实例化可操作的窗口。 部分源代码摘录： ftpClient = new FtpClient(); //实例化FtpClient对象 String serverAddr=jtfServer.getText(); //得到服务器地址 ...
输入字符长度限制(可按字节比较)； 22.对于具有相同名称的单选按钮的选中判断； 23.限制具有相同名称的多选按钮的选中数目； 24.自定义的正则表达式验证； 25.文件上传格式过滤(1.04新增)。 <br>...
表单的验证一直是网页设计者头痛的问题，表单验证类 ...21.输入字符长度限制(可按字节比较)； 22.对于具有相同名称的单选按钮的选中判断； 23.限制具有相同名称的多选按钮的选中数目； 24.自定义的正则表达式验证；
百度云盘分享 ... Java实现的FTP连接与数据浏览程序，实现实例化可操作的窗口。 部分源代码摘录： ftpClient = new FtpClient(); //实例化FtpClient对象 String serverAddr=jtfServer.getText();...
21.输入字符长度限制(可按字节比较)； 22.对于具有相同名称的单选按钮的选中判断； 23.限制具有相同名称的多选按钮的选中数目； 24.自定义的正则表达式验证； 运行环境(客户端)： 在Windows Server 2003下用IE6.0+...
<br> Validator是基于JavaScript技术的伪静态类和对象的自定义属性，可以对网页中的表单项输入进行相应的验证，允许同一页面中同时验证多个表单，熟悉接口之后也可以对特定的表单项甚至仅仅是某个字符串进行...
21.输入字符长度限制(可按字节比较)； 22.对于具有相同名称的单选按钮的选中判断； 23.限制具有相同名称的多选按钮的选中数目； 24.自定义的正则表达式验证； 25.文件上传格式过滤(1.04新增)。 更新历史： 1.01 ...
小编之前整理了不少JavaScript常用的正则表达式实例，都是自己用的，现在放出来给大家分享下。 代码如下:/*** 取得字符串的字节长度*/ function strlen(str) { var i; var len; len = 0; for (i=0;i<str>...