Question

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

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

非常感谢！

Answer 1

假设您的输入字段的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事件处理程序中编写突出显示代码，如果输入字段中的值发生更改，将自动触发该代码。

Answer 2

这使得您的页面无响应的原因是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
});

Answer 3

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

        ...
    });
});

只要用户在输入中输入内容，就会触发绑定到该事件（键盘或模糊）的功能。

在Javascript中轮询输入字段

3 个答案: