为什么 Onblur 不起作用（JQuery/Javascript）答案

【问题标题】：Why is Onblur not working (JQuery/Javascript)为什么 Onblur 不起作用（JQuery/Javascript）
【发布时间】：2011-12-02 16:37:48
【问题描述】：

我有以下输入字段，我想在用户键入时为其提取建议：

<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 应该消失还是我必须更明确地这样做？

谢谢！

【问题讨论】：

所以你基本上是在重塑autocomplete?

标签： javascript jquery html css ajax

【解决方案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);
    });
});

希望对你有帮助

【讨论】：

【解决方案2】：

你的单引号包含在其他单引号中：

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

应该阅读

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

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

【讨论】：

+1 我要澄清一下，您的意思是不要在属性名称、等号和值之间放置空格。您现在的措辞方式似乎是您的意思是多个属性中的每一个之间不应该有空格，当然必须有空格。 <tag attribute1="value1" [space here] attribute2="value2"/>

【解决方案3】：

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

由于 removeSuggestions 应该被视为字面量，因此您应该对属性值使用双引号。

【讨论】：