jQuery jquery文本输入长度控制

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1075962/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 10:36:10  来源:igfitidea点击:

jquery text input length control

jquery

提问by user121196

the text input only allows three words separated by spaces, and if it exceeds 3, the user can't input anymore, is this possible using jQuery? I can use keyup event to listen, but how do I stop user from typing in more tokens without using disabled. This is sort of similar to the native maxlength property for the text input in html except that the maxLength in this case is the number of tokens.

文本输入只允许用空格分隔的三个单词,如果超过3个,用户就不能再输入了,这可以使用jQuery吗?我可以使用 keyup 事件来侦听,但是如何阻止用户在不使用禁用的情况下输入更多令牌。这有点类似于 html 中文本输入的本机 maxlength 属性,只是在这种情况下 maxLength 是标记的数量。

回答by Jataro

Check if the input already has 3 words and they are trying to enter a space. If so return false:

检查输入是否已经有 3 个单词并且他们正在尝试输入一个空格。如果是这样返回false:

$('#myTextbox').keydown(
    function(event)
    {
        var input = $(this).val();
        var numberOfWords = input.split(' ').length;
        if(numberOfWords == 3 && event.keyCode == 32)
        {
            return false;
        }
    }
);

Edit:There was an additional questionabout the situation where someone might past text in the field. As a cross browser solution I would probably bind code similar to @karim79's to the blur event.

编辑:还有一个关于某人可能会在该字段中传递文本的情况的附加问题。作为跨浏览器解决方案,我可能会将类似于@karim79 的代码绑定到模糊事件。

$('#myTextbox').blur(
    function(e)
    {
        var tokens = $(this).val().split(' ');
        if(tokens.length > 3) 
        {
            $(this).val(tokens.slice(0,3).join(' '));
        }
    }
);

回答by karim79

EDIT: Something like this should do it (tested):

编辑:这样的事情应该做(测试):

    $('#myTextbox').keyup(function(e){
        var wordArr = $(this).val().split(' ');
        if(wordArr.length > 3 && e.keyCode == 32) {
            var arrSlice = wordArr.slice(0,3);
            var newStr = arrSlice.join(' ');
            $(this).val(newStr);
        }
    });

If the user attempts to type in more than three words, the contents will be overwritten with only the first three words. This solution will show characters being removed as they are typed if three words are exceeded, thus providing a bit of feedback.

如果用户尝试输入三个以上的单词,内容将仅被前三个单词覆盖。如果超过三个单词,此解决方案将显示在键入时删除的字符,从而提供一些反馈。

If that's not the desired behaviour, @Jataro's solution is the way to go.

如果这不是所需的行为,@Jataro 的解决方案就是要走的路。

回答by SolutionYogi

May be something like,

可能是这样的,

$('#myTextbox').change(

    function()
    {
         var input = $(this).val();
         var numberOfWords = input.split(' ').length;
         if(numberOfWords > 3)
         {
              $(this).val(input.substring(0, input.lastIndexOf(' ')-1));
         }
    }
);

I haven't verified this code, but something like this should work.

我还没有验证这个代码,但像这样的东西应该可以工作。

And yes, as mgroves said, don't forget to re-validate everything on the server.

是的,正如 mgroves 所说,不要忘记重新验证服务器上的所有内容。