概述:
表单提交时,常常会遇到需要统计字数、限定字数的需求,这里分别列出js解决方案,兼容ie8+。
需求分解:
1.首先,需要限制输入的最大字数,如只能输入“200个字”,超过200个字则禁止输入(输入之后没反应)。
2.需要将当前输入的字符数统计出来,能够被看到。
3.要兼容ie8+,适用于input、textarea这两种最常用的“输入类型表单提交”。
核心提示:
1.html5表单新属性有maxlength这个属性,可以限制输入字数。不过这个属性在ie8/9中,对于textarea是不支持的。
2.要考虑粘贴、退格键、剪切、选中一段按键替换等情况。
思路
1.开始考虑使用onkeypress、onpatse这类的事件做监听,配合使用达到效果,后来发现并不是很科学。于是使用onpropertychange、oninput来完成这个效果。
2.关于如何模拟maxlength这个属性,想到的思路是字符串操作 —— substr(将文本输入框中呈现的内容,只截取前面的某一段来呈现)
代码
<!--结构部分-->
<textarea id="in"></textarea>
<span id="sp">0</span></span>
<!--js部分-->
<script>
limitNumber("in", "sp", 10);//输入框id,统计元素id,允许输入字符数
function limitNumber(input, span, maxlength) {
var obj = document.getElementById(input);
var showObj = document.getElementById(span);
if (window.attachEvent) {//由于有兼容性问题需要做是否是ie的判断
obj.onpropertychange = function () {
var length = (this.value.length).toString();
if (length <= maxlength) {
showObj.innerHTML = length;
} else {
showObj.innerHTML = maxlength;
this.value = this.value.substr(0, 10);//截取前十个字符显示到输入框
}
}
} else {
obj.oninput = function () {
var length = (this.value.length).toString();
if (length <= maxlength) {
showObj.innerHTML = length;
} else {
showObj.innerHTML = maxlength;
this.value = this.value.substr(0, 10);
}
}
}
}
</script>
其他提示
onpropertychange是ie私有的事件,oninput是非ie专有的事件。
发现onpropertychange事件,会自执行一次。不过对于这个效果没有影响,有心情的朋友可以试一下。