Question

我想将textarea中的字符数限制为255，但仍允许Backspace，Delete，箭头键，Home，End，PgUp等键。我还想允许Ctrl + C，Ctrl + X，Ctrl + V，Ctrl + textarea内的快捷方式。即使通过Ctrl + C或右键单击＆gt;粘贴文本，字符数也不应超过255。糊。使用Opera以外的浏览器，我可以简单地使用maxlength属性，但遗憾的是Opera不支持。

我查看了SO的一些解决方案，但似乎没有一个能够实现我想要的功能。而这些解决方案有点难看，因为其中一些解决方案很难编码许多keyCodes。（也许这是唯一的方法。）

我该如何解决这个问题？

Answer 1

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

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

Fiddle

注意：没有IE＆lt; = 8支持。这在技术上可以用MS的propertychange事件进行填充，但是当你在IE8 textarea上粘贴时，这是相当错误的，数字。

刚刚制作了这个略显粗略的片段，以自动填充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);
        });
    //}

});

Demo

在Opera 12.10和IE8中测试过。

这将自动修补DOM准备好maxlength属性的textareas。您可以通过将事件附加到祖先并使用textarea[maxlength]作为后代选择器来委派事件（如果有动态生成的textareas），例如：

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

最后，功能检测已被注释掉，因为Opera 确实在textareas上具有maxLength属性，它还将html的值解析为DOM maxLength属性如果没有-1的textareas具有默认值（maxLength），那么它在Opera中显然没有效果。

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

如何在Opera中强制执行textarea上的maxlength但允许修改

1 个答案: