<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>实时提示可输入字符字节数-www.jb200.com</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=="") {
objobj.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>
4、JavaScript charAt() 方法，返回指定位置的字符。JavaScript 并没有一种有别于字符串类型的字符数据类型，所以返回的字符是长度为1的字符串。
