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

停止输入清除onFocus

1 个答案: