javascript - 当用户选择自动完成值时是否会触发事件？

Question

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

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

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

标签： javascripthtml

Answer 1

您可以尝试使用 获取背景颜色window.getComputedStyle(elem).getPropertyValue("background-color")，尽管这只适用于 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中的演示：