IE 中文本区域最大长度

Question

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

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

我还没有看到一个垫片可以限制 IE 中 textarea 的字符长度，其键盘行为与 input[type=text] 元素相同。

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

现有的实现看起来像这样：

$('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));
    }
});

上述实现的问题是您可以键入或粘贴 11 个字符和值直到值更改后才将其修剪为最大长度。我想在值更改之前阻止更改，以便更好地与 input[type=text,maxlength] 行为保持一致。

Answer 1

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

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

一种可能的解决方法是使用 CSS 将文本区域隐藏在屏幕之外，然后放置另一个模仿它的“假”文本区域。当用户键入时，让它在屏幕外的操作中执行操作，然后将所需内容复制到屏幕上的“假”操作中。在实践中，我不确定这对于像右键单击> >这样的实例如何工作。粘贴情况 - 可能需要大量的混乱。

Answer 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();
            }

        }

    });