IE中的文本区域最大长度答案

【问题标题】：Textarea maxlength in IEIE中的文本区域最大长度
【发布时间】：2012-02-13 17:28:02
【问题描述】：

有没有办法从给定的keydown 事件中判断出所有者input[type=text] 或textarea 在应用后会减少还是增加长度？

背景：拥有一个 HTML5 站点 (<!DOCTYPE html>)，它必须支持 IE 8 和 9 用户作为主要消费者。在某些页面上，我有带有 maxlength="100" 属性的 <textarea> 元素。 IE 无法识别maxlength 属性，并允许在textarea 中输入超过100 个字符。

我还没有看到在 IE 中使用与 input[type=text] 元素相同的键盘行为来限制 textarea 字符长度的 shim。

出于这个原因，我正在尝试写一个。

现有的实现如下所示：

$('textarea[maxlength]').on('keydown keyup blur', function(e) {
    var $this = $(this),
        maxlen = $this.attr('maxlength'),
        val = $this.val();

    if (val.length > maxlen) {
        $this.val(val.substr(0, maxlen));
    }
});

above implementation 的问题是您可以键入或粘贴 11 个字符，并且在值更改之前不会将值修剪到最大长度。我想在值更改之前阻止更改，以更好地与input[type=text,maxlength] 行为保持一致。

【问题讨论】：

stackoverflow.com/questions/1125482/… 的副本？
请记住，文本的长度也可以通过右键菜单粘贴来增加。我不知道有什么方法可以捕捉到那个事件。
IE 中有一个“粘贴”事件。
“重复”是 2 1/2 岁。为什么这个问题被否决了？那个“重复”使用了一个非常不完整的解决方案。

标签： html input internet-explorer-8 textarea internet-explorer-9

【解决方案1】：

您已经在监听 keydown 和 keyup 事件 - 不幸的是，您无能为力。 keypress 事件可能会添加更多内容，但我认为它们与 keyup 一起触发，所以可能不会。

上述代码的一个问题是，如果您右键单击并粘贴（或通过编辑菜单执行此操作），它将无济于事。

一种可能的解决方法是使用 CSS 将文本区域隐藏在屏幕外，然后放置另一个模仿它的“虚假”文本区域。当用户键入时，让它在屏幕外操作，然后将您想要的内容复制到屏幕上的“假”操作。在实践中，我不确定这将如何与右键单击 > 粘贴情况等实例一起工作 - 这可能需要很多时间。

【讨论】：

【解决方案2】：

您的问题是您的 Internet Explorer 甚至没有将 maxlength 的值放入 html，例如尝试将其硬编码到 javaScript 中；

 $(document).on('input keyup', 'textarea', function(e) {
        // maxlength attribute does not in IE prior to IE10
        // http://stackoverflow.com/q/4717168/740639
        console.debug("here")
        var $this = $(this);
        var maxlength = 255;
        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();
            }

        }

    });

【讨论】：