在输入字段中输入 3 个字符时使用 jquery 触发事件答案

【问题标题】：Trigger event with jquery when 3 characters are entered in the input field在输入字段中输入 3 个字符时使用 jquery 触发事件
【发布时间】：2020-06-28 07:11:34
【问题描述】：

假设我有一个 HTML 输入字段

<input type="text" maxlength="50" size="50" name="subject" id="subject">

我需要在每输入 3 个字符时触发一个函数。

例如：

如果用户输入“aaa” - 触发事件，他继续输入“aaa bbb” - 再次触发事件，等等。

但不应计算空格。

我需要这个将字段的值发布到外部 API - 进行搜索。

以前有人做过吗？

请帮忙。

【问题讨论】：

标签： jquery autocomplete triggers character

【解决方案1】：

试试这样的。在页面加载时将事件处理程序绑定到input

$(function(){

    $("#subject").change(function(){

         var val = $(this).val().trim();
         val = val.replace(/\s+/g, '');

         if(val.length % 3 == 0) { //for checking 3 characters
               //your logic here
         }

    });      
});

【讨论】：

.trim() 删除字符串两端的空格。您还需要从字符串中删除空格。
对于，更改事件也被推迟到元素失去焦点。
无论如何，这正是我所需要的。谢谢大家。
你为什么会使用模数？长度只能是整数？

【解决方案2】：

如果您想在用户键入时实时执行此操作，并且不要求他们从输入中移除焦点，您可以使用keyup 事件和稍微修改的逻辑来过滤空格键按下。

$('#subject').on('keyup', function(e) {
    if (e.which !== 32) {
        var value = $(this).val();
        var noWhitespaceValue = value.replace(/\s+/g, '');
        var noWhitespaceCount = noWhitespaceValue.length;
        if (noWhitespaceCount % 3 === 0) {
            // Call API
        }
    }
});

jsfiddle

【讨论】：

【解决方案3】：

您还需要在子句中添加vals.length > 0才能在length = 0时工作：

//for checking 3 characters
if( vals.length > 0 && val.length % 3 == 0 )

【讨论】：