为什么Onblur不工作(JQuery/Javascript)

Question

我有以下输入字段,我想在用户输入时提取建议:

<input type = 'text' name= 'target' id='target' style='width:150px' onblur ='setTimeout('removeSuggestions()', 20);' onkeyup ='getSuggestions(this.value);'/>

它下面有一个"建议"div,我正在使用以下javascript.

function getSuggestions(value){
   if (value !=""){
   $.post("target.php", {targPart:value}, function(data) {
     $("#suggestions").html(data);
    if(value.length>2){
        doCSS();
        }

   });
   } else {
    removeSuggestions();
    }

  }

   function removeSuggestions(){

   $("#suggestions").html("");
   undoCSS();
   }
  function addText(value){

      $("#target").val(value);

  }
  function doCSS(){
  $("#suggestions").css({
      'border' : 'solid',
       'border-width': '1px'
    });

  }

  function undoCSS(){
   $("#suggestions").css({
      'border' : '',
       'border-width': ''
    });
  }

我想,当我点击字段外...建议div应该消失或者我必须更明确地做吗？

谢谢!

Answer 1

你的问题在这里:

<input type = 'text' name= 'target' id='target' style='width:150px' onblur ='setTimeout('removeSuggestions()', 20);' onkeyup ='getSuggestions(this.value);'/>

出于某种原因,您使用单引号来包围属性值,但之后您还使用它来围绕setTimout()中的函数调用.因此,当浏览器解析它时,它会停止该属性

onblur ='setTimeout('

你得到JS错误.

使用双引号括起HTML属性.

<input type = "text" name= "target" id="target" style="width:150px" onblur ="setTimeout('removeSuggestions()', 20);" onkeyup = "getSuggestions(this.value);"/>

此外,这不是使用setTimout()的最佳方式.请改用匿名函数.

此外,绑定事件侦听器内联不是最佳实践.而是使用不引人注目的JavaScript.

$(function(){
    $('#target').blur(function(e) {
        setTimeout(function(){
            removeSuggestions()
        }, 20);
    });

    $('#target').keyup(function(e) {
        getSuggestions(e.target.value);
    });
});

希望有所帮助

Answer 2

你的单引号位于其他单引号内：

onblur ='setTimeout('removeSuggestions()', 20);'

应该读

onblur='setTimeout("removeSuggestions()", 20);'

另外，我建议不要在 HTML 标记属性及其值之间放置空格（请参阅注释），这可能会在某些具有严格解析器的浏览器上导致问题。