当在输入字段中输入3个字符时，使用jQuery触发事件。

Question

我有一个HTML输入框，假设它是这样的：

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

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

例如：

如果用户输入“aaa” - 触发事件，然后继续输入“aaa bbb” - 再次触发事件，以此类推。

但是空格不应计入字符数。

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

有人以前做过这个吗？

请帮忙。

- Kirill Reva

Answer 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
         }

    });      
});

- Hary

---

.trim()函数可以去除字符串两端的空格，但如果需要去除字符串内部的空格，则需要使用其他方法。 - Corneliu

对于<input>元素，change事件被推迟到元素失去焦点。 - Corneliu

无论如何，这正是我所需要的。谢谢大家。 - Kirill Reva

为什么要使用模数？长度只能是整数吗？ - Howie

Answer 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

- Ruben Infante

Answer 3

您需要在子句中添加 vals.length > 0，以便在 length = 0 时正常工作：

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

- user12486562