Javascript中的轮询输入字段

我在自学JQuery，并且作为实践，我正在创建一个页面，在该页面中，用户在输入字段中输入文本，该字符串的所有实例都在页面主体中找到并突出显示。我已经能够在用户单击按钮时实现此功能，但我想让它继续轮询输入字段并突出显示字符串

连续进行民意调查似乎会使页面崩溃

$(document).ready(function(){

     while(1==1){

         var str = document.input.str.value;

          $(function(){
               $('p:contains('+str+')').each(function(){
                     var regex = new RegExp(str, "g");

                      $(this).html( $(this).html().replace( regex ,"<span class='hlt'>"+str+"</span>")); 
                });
            });
    }
});

$（文档）.ready（函数（）{
而（1==1）{
var str=document.input.str.value；
$（函数（）{
$（'p:contains（'+str+'））。每个（函数（）{
var regex=新的RegExp（str，“g”）；
$（this.html（$（this.html（）.replace（regex，“+str+”））；
});
});
}
});

网站似乎一直都有这种功能，所以我确信它是可行的，我只是找不到任何关于它的信息

---

非常感谢

假设您的输入字段具有id

myid

。然后-

$(document).ready(function()
{
    $("#myid").change(function()
    {
        var str = document.input.str.value;

        $('p:contains('+str+')').each(function()
        {
            var regex = new RegExp(str, "g");

            $(this).html( $(this).html().replace( regex ,"<span class='hlt'>"+str+"</span>")); 
        });
    });
});

$（文档）.ready（函数（）
{
$（“#myid”）.change（函数（）
{
var str=document.input.str.value；
$（'p:contains（'+str+'））。每个（函数（）
{
var regex=新的RegExp（str，“g”）；
$（this.html（$（this.html（）.replace（regex，“+str+”））；
});
});
});

---

这意味着您不必轮询更改，只需在

更改
事件处理程序中编写突出显示代码，如果输入字段中的值发生更改，将自动触发该事件处理程序。
这使得页面无响应的原因是JavaScript通常与UI在同一线程上运行。也就是说，如果JavaScript正在运行，页面的其余部分将没有响应。您真正想做的是以下操作之一：


使用模糊事件（当输入框失去焦点时触发）
使用
更改
事件

使用keyup/keydown事件
使用setTimeout或setInterval以非阻塞方式轮询输入框

如果您想观察输入框中可能发生的每一个变化，我建议您观察键盘事件

$(document).ready(function(){
    $('#inputID').keyup(function(){
        $('p:contains('+str+')').each(function(){
                 var regex = new RegExp(str, "g");
                 $(this).html( $(this).html().replace( regex ,"<span class='hlt'>"+str+"</span>")); 
        });
    });
});

每当用户在您的输入中键入内容时，绑定到该事件的函数（keyup或blur）就会被触发。
Oh，哇。非常简单的解决方案。谢谢我注意到的一点是，它只在焦点丢失时执行函数。当然，这并不是最糟糕的事情，但我很想看看是否有办法解决这个问题。@Pete：如果你想在焦点没有丢失的情况下执行高亮显示代码，那么就用
keyup
或
keydown
事件，而不是
change
事件。在这种情况下，只需将上述代码中的
change
替换为
keyup
或
keydown
。
$(document).ready(function(){
    var intervalID = setInterval(function(){
        //execute logic here
    }, 100); // 100 ms check
});

$(document).ready(function() {

    // you can do this with blur event
    $("#input_id").blur(function(){
        var str = $(this).val();

        ...
    });

    // ... or keyup event, but be aware of performance issues
    $("#input_id").keyup(function(){
        var str = $(this).val();

        ...
    });
});