停止输入清除onFocus

Question

我有这个自动建议应用程序的电子邮件。这一切都运作良好，除非当我点击输入字段外，然后再点击它清除'onFocus'。任何想法如何我可以阻止这种情况发生？

function suggest(inputString){ 
    if(inputString.length == 0) { 
     $('#suggestions').fadeOut(); 
    } else { 
    $('#email').addClass('load'); 
     $.post("auto.php", {queryString: ""+inputString+""}, function(data){ 
      if(data.length >0) { 
       $('#suggestions').fadeIn(); 
       $('#suggestionsList').html(data); 
       $('#email').removeClass('load'); 
      } 
     }); 
    } 
} 

function fill(thisValue) { 
    $('#email').val(thisValue); 
    setTimeout("$('#suggestions').fadeOut();", 600); 
} 

<input type="text" id="email" onKeyUp="suggest(this.value);" onClick="fill();" /> 

Answer 1

的onClick="fill();"打电话给你的元素上执行fill(undefined)每当你点击输入框。

这样做的第一件事是将输入框的值设置为thisValue（当前持有undefined），这将有效地清除输入框。

这与焦点没有任何关系，请尝试单击该框，输入一个值然后再次单击该框，它可能会擦除该值，而无需先单击。

---

对于它的价值，你可能会过度复杂化。我想象清除框的要求是删除占位符文本。如果您正在设计一个远程新浏览器，请使用HTML5 placeholder="E-Mail"让浏览器在用户未输入任何内容时以较轻的文本（或其他）显示该文本。

如果你要支持旧的浏览器有办法解决这个也一样，这是一个简单但不完美的方式（可以概括这一点，并做出一个jQuery插件或去找一个在那里已经为时已存在）：

HTML：

<input type="text" id="email" class="placeholder" value="E-Mail" /> 

CSS：

.placeholder { color: #ccc; } 

的Javascript：

;(function($) { 

    $(document).ready(function() { 

    $("#email").on('focus', function() { 
     var $this = $(this); 
     if ($this.hasClass('placeholder')) { 
     $this.removeClass('placeholder'); 
     $this.val(''); 
     } 
    }); 

    $("#email").on('keyUp', function() { 
     // this is where your key-up code goes 
    }); 

    }); 
})(jQuery);