 

js 限制表单输入长度汉字为两个字符_表单特效-js教程-

2025-04-23 12:53:46 浏览量(13)

将该效果整合成了一个函数，此函数接受3个参数：
第一个为textarea或其他text表单的ID；
第二个为显示输入内容的ID，可留空；
第三个为最多输入的字符，一个汉字为2个字符。
这只是一个基础效果，欢迎同学们进行优化和改进。
要获取代码请查看demo的源文件

<meta charset="utf-8">
<title>限制表单输入长度 汉字为两个字符</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><textarea name="textarea" id="commentText" style="width:500px; height:150px;"> 最多输入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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

【声明】：本博客不参与任何交易，也非中介，仅记录个人感兴趣的主机测评结果和优惠活动，内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客，即表示您已经知晓并接受了此声明通告。

分享到

相关推荐

回顶部