2

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

我查看了 SO 的一些解决方案，但它们似乎都没有完全实现我想要的。这些解决方案有些难看，因为其中一些硬编码了许多 keyCode。（也许这是唯一的方法。）

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

4

1 回答 1

2

关于 Opera，您可以只处理input事件：

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

小提琴

注意：不支持 IE<=8。从技术上讲，这可以通过 MS 的propertychange事件进行填充，但是当粘贴到 IE8 文本区域时，这是相当错误的，数字。

刚刚制作了这个稍微粗略的片段来自动填充 textareas' 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);
        });
    //}

});

演示

在 Opera 12.10 和 IE8 中测试。

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

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

最后，特性检测被注释掉了，因为 Opera确实在 textareas 上有一个maxLength属性，它将 html 的值解析为 DOMmaxLength属性，并且对于没有 的 textareas 具有默认值 ( -1) maxLength，只是它显然没有效果在歌剧中。

我找不到正确检测这个 Opera 错误的方法，所以将特征检测部分注释掉了，也就是说，上面的代码将侦听器附加到textareas 上，与浏览器是否支持maxLength. 如果您设法检测 Opera 的错误，请随时编辑答案。虽然这似乎是一个非常本地化的错误，很快就会修复。

于 2013-06-08T03:06:34.283 回答