javascript限制和统计文本输入字数的解决方案

概述：

表单提交时，常常会遇到需要统计字数、限定字数的需求，这里分别列出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事件，会自执行一次。不过对于这个效果没有影响，有心情的朋友可以试一下。