轮询Javascript中的输入字段

Polling input field in Javascript

本文关键字：输入 字段 Javascript 轮询      更新时间：2023-09-26

我在自学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>")); 
                });
            });
    }
});

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

非常感谢！

导致页面无响应的原因是JavaScript通常与UI在同一线程上运行。也就是说，如果您的JavaScript正在运行，页面的其余部分将没有响应。你真正想做的是以下之一：

  • 使用blur事件(当输入框失去焦点时激发(
  • 使用change事件
  • 使用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>")); 
        });
    });
});

如果你想要轮询方法：

$(document).ready(function(){
    var intervalID = setInterval(function(){
        //execute logic here
    }, 100); // 100 ms check
});

假设您的输入字段的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>")); 
        });
    });
});

这意味着，您只需在change事件处理程序中编写高亮显示代码，而不是轮询更改，如果输入字段中的值发生更改，就会自动触发该事件处理程序。

$(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();
        ...
    });
});

每当用户在输入中键入内容时，绑定到该事件的函数(keyup或blur(都会被触发。

相关文章：