javascript - 对于文本框/文本区域，限制输入的输入长度，但不限制粘贴

Question

我有一个奇怪的要求:

function TextLimit(elem, maxChars) { ... }

其中 elem 是文本区域或 type=text 的输入，maxChars 是可以进入 elem 的最大字符数。当用户输入时，函数内的代码必须将 elem 内的文本长度限制为 maxChars。但是，如果用户是第一次粘贴，即使粘贴的文本的字符数多于 maxChars，元素也必须接受粘贴的所有内容。编辑:如果粘贴的文本比 maxChars 长，则在第一次粘贴后，用户不能再键入/粘贴，除非文本被删除/退格到小于 maxChars 的长度。

任何使用纯 JavaScript 或 jQuery 的建议都将不胜感激。

maxlenght 属性不允许粘贴。在粘贴时以编程方式设置/删除它，在所有浏览器中都无法正常工作。在 keydown/keypress/keyup 上取 elem 值的子串会产生一些古怪的结果。

Answer 1

这样的事情似乎可行:

还有一些事情需要解决，比如在达到最大值时允许使用删除键。不过应该很容易修复。

尝试一下: http://jsfiddle.net/wxUZz/7/ (更新)

function TextLimit(elem, maxChars) {
    var permittedKeys = [8,37,38,39,40,46];

    elem.focus(function() {
        if(elem.val().length >= maxChars) {
            elem.data('prevent', true);
            elem.data('value', elem.val());
        }
    });

    elem.blur(function() {
        if( elem.data('prevent') ) {
            elem.val( elem.data('value') );
        }
    });

    elem.keydown(function(event) {
        var count = elem.val().length;
        if(count >= maxChars && $.inArray(event.which, permittedKeys) < 0) {
            elem.data('prevent', true);
            elem.data('value', elem.val());
            return false;
        } else {
            elem.data('prevent', false);
        }
    });  
}

TextLimit($('#myTextarea'), 30);