当用户选择自动补全值时，是否会触发事件？

Question

如果我有一个带有自动完成字段的表单：

<form>
    <label>First name: <input type=text autocomplete="given-name"></label>
</form>

当用户从下拉列表中选择一个自动完成值(但在模糊事件之前)时，是否有事件触发？

Answer 1

你可以尝试使用window.getComputedStyle(elem).getPropertyValue("background-color")来获取背景颜色，尽管这只在Chrome中有效(据我所知，Chrome是唯一一个可以在自动完成时改变输入背景颜色的浏览器)。

​

$(document).ready(function() {
  function getBgrColor(elem) {
    return window.getComputedStyle(elem).getPropertyValue("background-color");
  }
  var initial = getBgrColor($('input')[0]);
  $('input').on('blur input', function() {
    var bgr = getBgrColor($(this)[0]);
    if (bgr != initial) {
      console.log("Autofilled");
    }
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  Select an autocomplete option, then click outside the input
  <br><br>
  <label>First name: <input type=text name="name"
            autocomplete="given-name"></label>
</form>

​

Chrome中的演示：

​

​