js限制表单输入长度方法示例(汉字为两个字符)

发布时间:2021-01-03编辑:脚本学堂
有关js限制表单输入长度的方法,检测表单输入长度,显示剩余可输入字数,该效果整合成了一个函数,此函数接受3个参数,需要的朋友参考下。

js限制表单输入长度 功能:
检测表单输入长度,显示剩余可输入字数

将该效果整合成了一个函数,此函数接受3个参数:
第一个为textarea或其他text表单的ID;
第二个为显示输入内容的ID,可留空;
第三个为最多输入的字符,一个汉字为2个字符。

完整代码:
 

复制代码 代码示例:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>限制表单输入长度 汉字为两个字符 - www.jb200.com</title>
<meta name="auther" content="f7" />
<script>
function lengthLimit(elem, showElem, max){
var elem = document.getElementById(elem);
var showElem = document.getElementById(showElem);
var max = max || 50;// 最大限度字符,汉字按两个字符计算
function getTextLength(str){// 获取字符串的长度 一个汉字为2个字符
return str.replace(/[^x00-xff]/g,"xx").length;
};
// 监听textarea的内容变化
if(/msie (d+.d)/i.test(navigator.userAgent) == true) {// 区分IE
elem.onpropertychange = textChange;
}else{
elem.addEventListener("input", textChange, false);
}
function textChange(){// 内容变化时的处理
var text = elem.value;
var count = getTextLength(text);
if(count > max){// 文字超出截断
for(var i=0; i<text.length; i++){
if(getTextLength(text.substr(0, i)) >= max){
elem.value = text.substr(0, i);
if(showElem) showElem.innerHTML = elem.value;// 显示输出结果
break;
};
}
}else{
if(showElem) showElem.innerHTML = elem.value;// 显示输出结果
};
};
textChange();// 加载时先初始化
};
</script>
</head>
<body>
<textarea name="textarea" id="commentText" style="width:500px; height:150px;"></textarea> 最多输入20个汉字
<input type="button" value="JS添加内容" onclick="document.getElementById('commentText').value = '您想说dasdsadsad的话!请输5325135353入您想说的'; lengthLimit('commentText', 'dsa', 40);" />
<div id="dsa"></div>
<script type="text/javascript">
lengthLimit("commentText", "dsa", 40);
</script>
</body>
</html>