Question

我有一个奇怪的要求：

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

其中elem是textarea或type = text的输入，maxChars是可以进入elem的最大字符数。当用户输入时，函数内部的代码必须将elem内的文本长度限制为maxChars。但是，如果用户第一次粘贴，则即使粘贴的文本包含更多字符，maxmhars也必须获取粘贴的所有内容。编辑：如果粘贴的文本比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);

Answer 2

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');

对于textbox / textarea，限制输入的输入长度，但不限制粘贴

2 个答案: