雁过请留痕...
代码改变世界

js 控制输入文字个数（换行不算）

2017-06-05 17:54  xiashengwang  阅读(1778)  评论(0)  编辑  收藏  举报

如题，换行符在textarea中是要当成一个字符的。用普通的maxlength属性就不行了，于是想到通过事件来控制输入文字的长度。

注意哦，回车换行不能算成字符。这样的话，普通的substring等方法可能都不适用，要考虑文字中的换行符。

目前的实现如下，还有不完美的地方。如drag事件没有考虑。

<html>
<head>
</head>
<body>
    <p>
        textArea2
    </p>
    <textarea id='txtArea2' data-maxlength=10 cols='50' rows='10'></textarea>
    <script>

                        var txtArea2 = document.getElementById("txtArea2");
            txtArea2.onkeydown = function(e) {
                var maxlength = this.getAttribute("data-maxlength");

                var selectionText = this.value.substring(this.selectionStart, this.selectionEnd);
                var selectionCnt = getLength(selectionText);

                if (getLength(this.value) - selectionCnt >= maxlength) {
                // 退格键，回车键，删除键，上下左右键
                    if (! (e.keyCode == 8 || e.keyCode == 13 || e.keyCode == 46 || (e.keyCode >= 37 && e.keyCode <= 40))) {
                        e.preventDefault();
                    }
                }

            }

            txtArea2.oninput = function() {
            // 只要有输入，就会触发，包括日语输入法，这个事件不能去
                var txtArea = this;
                var maxlength = txtArea.getAttribute("data-maxlength");
                txtArea.value = txtArea.value.substr(0, maxlength);
            }

            txtArea2.onpaste = function(e) {
                // 粘贴事件，只对应chorme。IE的话用window.clipboardData
                var clipboardData = e.clipboardData;
                var data = clipboardData.getData('Text');
                if (data != '') {
                    var part1 = this.value.substring(0, this.selectionStart);
                    var part2 = this.value.substring(this.selectionStart, this.selectionEnd);
                    var part3 = this.value.substring(this.selectionEnd);

                    var maxlength = this.getAttribute("data-maxlength");

                    var allowlength = maxlength - getLength(part1) - getLength(part3);
                    var pasteData = data.substr(0, allowlength);
                    var newStr = part1 + pasteData + part3;
                    this.value = newStr;
                    this.selectionStart = this.selectionEnd = part1.length + pasteData.length;
                    console.log(newStr);
                    e.preventDefault();
                }
            }

            // 字符统计函数（回车换行算字符）
            function getLength(input) {
                input = input || '';
                input = input.replace(/\n/g, '');
                return input.length;
            }
    </script>
</body>

</html>

上面的只是测试用的，没有包装成通用方法。不过效果已经实现了。

在此记录一下，有空再来完善一下。

测试环境：chorme。

IE未测试。