Question

我有一个带有keydown的文本框，单击并更改绑定到它的事件处理程序。当用户在此文本框中输入文本时，预览会同时更新。这很棒！

但是，当用户输入一些文本然后从自动填充中选择时，只有用户输入的文本在预览中可见。

仅在用户离开文本框或单击其中或输入更多字符时才会更新。

用户从自动填充中选择的瞬间是否有任何事件被触发？

注意：我没有使用jquery自动完成插件或任何东西，只是网页浏览器的autocoplete。

Answer 1

我遇到了同样的问题。单击建议的自动填充值时，浏览器（在本例中为Chrome）根本不会触发任何事件。所以我使用setInterval每100ms左右轮询我的输入字段以查看它们的值是否已更改，如果是，则调用相应的函数。

这是我的代码（使用jQuery）：

  var $form = $(".user");
  var $email = $("input[name='email']",$form);

  // start polling when the field is focused
  $email.focus(function()
    {
      var $inp = $(this);
      $inp.data("val_old",$inp.val());
      $inp.data("val_poll",setInterval(function()
        {
          if ($inp.data("val_old") != $inp.val())
          {
            checkEmail(); // value has changed, take some action
            $inp.data("val_old",$inp.val());
          }
        },100));
    });

  // stop polling on blur
  $email.blur(function()
    {
      clearInterval($(this).data("val_poll"));
      $(this).removeData("val_old val_poll");
    });

我曾经有过onkeypress事件，但是不再需要这个轮询器。

不是很漂亮，但很有效。适用于任何浏览器。

Answer 2

<script type="text/javascript">
    function fillReview() {
        var email = document.getElementById("email");
        var review = document.getElementById("email-review");
        review.innerHTML = email.value;
    }
</script>


<input type="text" id="email"  onkeyup="fillReview();" />
<span id="email-review"></span>

从自动完成中选择的事件

2 个答案: