文本区域的最大长度在 IE 中不起作用答案

【问题标题】：Maxlength for text area doesn't work in IE文本区域的最大长度在 IE 中不起作用
【发布时间】：2012-02-24 22:18:24
【问题描述】：

我正在尝试限制在文本区域中输入的字符数，如图所示：

<div>
 @Html.TextAreaFor(x => x.StudentName, new { @maxlength = "1000" })
</div>

这在 Firefox 和 Chrome 中运行良好，但 maxlength 属性在 IE 中不起作用。我该怎么做？？

【问题讨论】：

见stackoverflow.com/questions/1125482/…
@TimMedora：那么为什么不将问题标记为重复？
@leppie - 因为上次我搜索适用于所有情况的 maxlength 脚本时，我最终编写了自己的脚本。我链接到的帖子已超过 18 个月；那里可能有更好的解决方案，但我认为它至少会给 OP 一个开始的地方。只是我的意见。

标签： html asp.net-mvc-3

【解决方案1】：

maxlength 属性不是 HTML 4.01 中 <textarea> 的标准。虽然是defined in HTML5，但我猜 IE 没有实现它。要使其适用于所有浏览器，您可以使用 javascript。这是an example。

【讨论】：

根据 wufoo 的这张图表，它确实在 IE10 中工作：wufoo.com/html5/attributes/03-maxlength.html
@Sharon，IE10 还不是 RTM。
是的，它确实在 IE10+ 中工作。只有 IE9 和更少是一个问题。这是一个很好的解决问题的方法！！！

【解决方案2】：

这是我基于 jQuery 的解决方案。在 IE9 中运行良好，在 IE8 中有点不稳定。

// textarea event handler to add support for maxlength attribute
$(document).on('input keyup', 'textarea[maxlength]', function(e) {
    // maxlength attribute does not in IE prior to IE10
    // http://stackoverflow.com/q/4717168/740639
    var $this = $(this);
    var maxlength = $this.attr('maxlength');
    if (!!maxlength) {
        var text = $this.val();

        if (text.length > maxlength) {
            // truncate excess text (in the case of a paste)
            $this.val(text.substring(0,maxlength));
            e.preventDefault();
        }

    }

});

http://jsfiddle.net/hjPPn/

IE8 链接：http://jsfiddle.net/hjPPn/show

原生浏览器支持

另外，如果您想知道哪些浏览器支持maxlength：https://caniuse.com/#search=maxlength

【讨论】：

【解决方案3】：

您也可以使用 javascript，这更容易：

<textarea  name="question" cols="100" rows="8" maxlength="500px" onKeyPress="return ( this.value.length < 1000 );"></textarea>

【讨论】：

@MatthiasDailey 如果您使用的是 jQuery，我的回答会处理粘贴。它可能会被重构为纯 JS。
为什么maxlength有px？这不是它的用途。
在你的 HTML 中嵌入 Javascript 对你来说可能看起来很“容易”，但我希望我永远不必维护你的代码！

【解决方案4】：

使用以下 Jquery - 例如，如果您想将长度限制为 48

$("textarea").keypress(function(e){
    var lengthF = $(this).val();

    if (lengthF.length > 48){
        e.preventDefault();
    }
});

【讨论】：

当用户尝试按删除或退格键时，此操作会失败。用户达到限制后会卡住