如何获取浏览器自动填充事件？

Question

比如有个邮箱自动填充

不希望弄掉浏览器自动填充，毕竟浏览器自动填充带密码

但这样影响到样式了，希望能获取这个事件，然后把自己写的隐藏了。

同时有个input事件绑定的事件，被自动填充同时触发了。

谷歌了，mdn和msdn找不到。。

Answer 1

1. 给表单form上设置autocomplete=on。
2. 给不想要提示的input是设置autocomplete=off即可。

Answer 2

var registerOnAutoComplete = function(elementSelector) {
  return new Promise(function(resolve, reject) {
    var element = document.querySelector(elementSelector);
    var hasKeyInteraction = false;

    element.addEventListener("input", function(e) {
      if(hasKeyInteraction === false) {
        resolve(e.target);
      }
    });

    element.addEventListener("keydown", function(e) {
      // If there is a keyboard interaction then we believe it is not autocomplete
      hasKeyInteraction = true;
    });
  });
};

Answer 3

实际生产环境使用，兼容chrome,firefox,ie浏览器

方案步骤：

1.input初始设置type=text
2.input聚焦focus事件将type=text改为type=password
3.表单提交请求，回调函数里面将type重新设置为text
4.提交按钮不要包裹在form表单里面（最新火狐量子浏览器必须这样，否则上面3步也没用）

如果上述方法不行，欢迎私信讨论~

Answer 4

方法1：

<input name="q" type="text" autocomplete="off"/> 添加name属性

参考：Turn Off Autocomplete for Input

方法2：

在<form>元素的第一行添加 <input autocomplete="false" name="hidden" type="text" style="display:none;">

参考：Disable HTML Form Input Autocomplete and Autofill