从自动完成中选择的事件

Question

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

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

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

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

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

Answer 1

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

这是我的代码（使用 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 事件，但是有了这个 poller 就不再需要它了。

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

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>