javascript - IE8 中的 maxLength答案

【问题标题】：javascript - maxLength in IE8javascript - IE8 中的 maxLength
【发布时间】：2013-09-09 19:06:58
【问题描述】：

使用 javascript 函数来防止超出文本字段的长度，但仍允许在其中粘贴和编辑。需要在 IE8 和 Firefox 中工作。

$(function() {
    var helper = document.createElement('textarea');
    //if (!('maxLength' in helper)) {
        var supportsInput = 'oninput' in helper,
            ev = supportsInput ? 'input' : 'propertychange paste keyup',
            handler = function() {
                var maxlength = +$(this).attr('maxlength');
                if (this.value.length > maxlength) {
                    this.value = this.value.substring(0, maxlength);
                }
            };

        $('textarea[maxlength]').on(ev, supportsInput ? handler : function() {
            var that = this;
            setTimeout(function() {
                handler.call(that);
            }, 0);
        });
    //}

});

如果文本在一行上，它可以正常工作（使用 maxLength = 25 进行测试）。但是，它不会执行回车和换行，也不会正确处理它们。

例如，如果我在一行中输入以下文本：

1111122222333334444455555

它使用全部 25 个字符。

但是，如果我在每一行输入文本并按回车键，这就是我能够输入的内容：

只有 22 个字符。我知道它正在检测回车，因为当我输入时： 11111

字符计数器显示 5。当我按下 enter 键时，计数器变为 6，如果我输入 22222，计数器现在变为 11。

我用来计算字符的代码是：

$("#myTextArea").keyup(function() {
        var j = $(this).val().length;
        var i = 25 - j;
        $("#charsUsed").text( j );
        $("#charsLeft").text( i );
        });

我认为问题可能是我为自动调整 TextArea 大小而输入的一些代码，但事实并非如此。我确定我只是在代码上遗漏了一些东西，希望能就我做错的事情提供意见，而且似乎还没有弄清楚。

【问题讨论】：

标签： javascript internet-explorer-8 textarea maxlength

【解决方案1】：

我自己偶然发现了答案。事实证明，我使用的字符计数器没有准确计算 <textarea> 中的换行符。

虽然我使用的是 IE8，但我在一个关于 Chrome 在 textarea 中使用 maxLength 属性计数字符错误的问题中找到了答案。这个问题是here。

我之前使用的代码：

$("#myTextArea").keyup(function() {
        var j = $(this).val().length;
        var i = 25 - j;
        $("#charsUsed").text( j );
        $("#charsLeft").text( i );
        });

已修改为：

$("#myTextArea").keyup(function() {
    var x = $("#myTextArea").val();
    var newLines = x.match(/(\r\n|\n|\r)/g);
    var addition = 0;
    if (newLines != null) {
       addition = newLines.length;
       }
    var j = x.length + addition;
    var i = 25 - j;
    $("#charsUsed").text( j );
    $("#charsLeft").text( i );
    });

嵌入的新行必须作为 CR LF 对传输 - 实际上是 2 个字符。感谢other thread 中的发帖人的帮助。

【讨论】：