javascript - 如何在 Opera 中的文本区域上强制最大长度但允许修改

Question

我想将文本区域中的字符数限制为 255，但仍然允许使用 Backspace、Delete、箭头键、Home、End、PgUp 等键。我还想允许使用 Ctrl+C、Ctrl+X、Ctrl +V、Ctrl+A 文本区域内的快捷键。即使通过 Ctrl+C 或右键单击 > 粘贴粘贴文本，字符数也不得超过 255 个。对于 Opera 以外的浏览器，我可以简单地使用 maxlength 属性，但不幸的是 Opera 不支持它。

我查看了SO的一些解决方案，但似乎没有一个能够完全实现我想要的。这些解决方案有些难看，因为其中一些解决方案硬编码了许多 key 代码。 (也许这是唯一的方法。)

我应该如何解决这个问题？

Answer 1

对于 Opera，您可以只处理 input事件:

$('textarea').on('input', function() {
    if (this.value.length > 255) this.value = this.value.substring(0, 255);
});

Fiddle

注意:不支持 IE<=8。这在技术上可以通过 MS 的 propertychange 进行调整。事件，但是在 IE8 文本区域、数字上粘贴时，这是相当有问题的。

---

刚刚制作了这个稍微粗糙的片段来自动填充文本区域的maxLength:

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

});

Demo

在 Opera 12.10 和 IE8 中测试。

这将自动修补在 DOM 上具有 maxlength 属性的文本区域。显然，您可以通过将事件附加到祖先并使用 textarea[maxlength] 作为后代选择器来委托(delegate)事件(如果有动态生成的文本区域)，例如:

$(document).on(ev, 'textarea[maxlength]', ...)

最后，功能检测被注释掉，因为 Opera 确实在文本区域上有一个 maxLength 属性，它将 html 的值解析为 DOM maxLength 属性以及没有 maxLength 的文本区域的默认值 (-1)，只是它在 Opera 中显然没有效果。

我找不到正确检测此 Opera bug 的方法，因此功能检测部分被注释掉，也就是说，上面的代码将监听器附加到 textarea 上，而与浏览器是否支持无关最大长度。如果您设法检测到 Opera 的错误，请随意编辑答案。尽管这似乎是一个非常本地化的错误，很快就会得到修复。