代码之家 › 专栏 › 技术社区 › Dimskiy

对于文本框/文本区域,限制键入时输入的长度,但不限制粘贴时输入的长度。

html jquery javascript

Dimskiy · 技术社区 · 16 年前

我有一个奇怪的要求:

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

其中elem是文本区域或类型=文本的输入,maxchars是可以进入elem的最大字符数。当用户键入时,函数内的代码必须将elem内的文本长度限制为maxchars。但是,如果用户是第一次粘贴,则即使粘贴的文本的字符多于maxchars,elem也必须获取粘贴的所有内容。编辑:如果粘贴的文本比maxchars长,那么在第一次粘贴后,用户将无法再键入/粘贴,除非文本被删除/退格到比maxchars小的长度。

任何使用纯javascript或jquery的建议都会受到欢迎。

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

2 回复 | 直到 12 年前

user113716 16 年前

像这样的事情似乎奏效了:

~~还有两件事要解决,比如在达到最大值时允许删除键。不过应该很容易解决。~~

试一试: 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);

lorenz mac 12 年前

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前