停止输入清除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);