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

Posted

技术标签:

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

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

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

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

【问题讨论】:

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

maxlength 属性不是 HTML 4.01 中 &lt;textarea&gt; 的标准。虽然是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://***.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();
    
);

【讨论】:

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

以上是关于文本区域的最大长度在 IE 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

文本区域验证最大规则在 laravel 6 中不起作用

文本区域的验证不起作用

具有自动调整大小的多个文本区域在 ionic3 中不起作用

文本区域字符限制

jhtmlarea 在更新面板中不起作用

mt-5 h 在顺风 css 中对 textarea 不起作用