停止 chrome 按 id 自动填充/建议表单字段

Question

好吧...和许多其他帖子一样，这让我抓狂。 Chrome 不断为我不希望它出现的字段提供自动完成建议。它与软键盘一起占据了整个页面，这会阻止用户查看/表单不是为了填充我们的用户数据，而是一个以前未知的新地址。

到目前为止我已经把它们都打开了

<form autocomplete="off">

和

<input autocomplete="randomstringxxx">

它们的效果已被注意到，chrome 不再填写整个表单 - 但它仍然想为我表单中的每个元素提出单个字段建议。

我终于意识到它现在从我的表单元素中获取 id/name 字段。

即下面会给我一个我以前用过的名字列表。

<input id="contact_name" name="contact_name">

任何人都可以建议一种无需重命名元素即可停止此操作的方法吗？它们与我数据库中的字段相关联，理想情况下我不必手动重命名并将它们匹配在一起。

例子-

https://jsfiddle.net/drsx4w1e/ 使用随机字符串作为自动完成元素属性 - STILL AUTOCOMPLETING

https://jsfiddle.net/drsx4w1e/1/ 以“关闭”作为自动完成属性。 - 仍在自动完成

https://jsfiddle.net/6bgoj23d/1/ 删除标签/ids/名称属性时没有自动完成的示例 - NOT AUTOCOMPLETING

例子

Answer 1

我知道这并不理想，因为它更改了输入的名称，但它只是暂时的。更改名称属性是我发现完全删除自动完成的唯一方法。

这个解决方案都是用 JS 和 HTML 但我认为如果用服务器端语言实现会更好，例如 PHP 或 Java.

我发现 autocomplete="none" 最适合 chrome 但它不能完全关闭自动完成。

工作原理

因此，在页面加载时，此解决方案会向每个输入名称添加一串随机字符。

eg. 'delivery_contact_name' becomes 'delivery_contact_nameI5NTE'

提交表单时，它会调用一个函数 (submission())，该函数会删除添加的随机字符。因此提交的表单数据将具有原始名称。

参见下面的解决方案：

<html>
  <body>
    <form autocomplete="none" id="account_form" method="post" action="" onsubmit="return submission();">
     
        <div class="my-2">
          <label for="delivery_contact_name" class="">*</label>
          <input autocomplete="none" class="form-control" id="delivery_contact_name" maxlength="200" minlength="2" name="delivery_contact_name" required="" type="text" value="">
        </div>
        <div class="my-2">
          <label for="delivery_telephone" class="">Telephone*</label>
          <input autocomplete="none" class="form-control" id="delivery_telephone" maxlength="200" minlength="8" name="delivery_telephone" required="" type="tel" value="">
        </div>
        <div class="my-2">
            <label for="delivery_address_1" class="">Delivery Address*</label>
            <input autocomplete="none" class="form-control" id="delivery_address_1" maxlength="50" minlength="2" name="delivery_address_1" required="" type="text" value="">
          </div>
          <div class="my-2">
            <label for="delivery_address_2" class="">Delivery Address*</label>
            <input autocomplete="none" class="form-control" id="delivery_address_2" maxlength="50" minlength="2" name="delivery_address_2" required="" type="text" value="">
          </div>
          <div class="my-2">
            <label for="delivery_address_3" class="">Delivery Address</label>
            <input autocomplete="none" class="form-control" id="delivery_address_3" name="delivery_address_3" type="text" value="">
          </div>
          <div class="my-2">
            <label for="delivery_address_4" class="">Delivery Address</label>
            <input autocomplete="none" class="form-control" id="delivery_address_4" name="delivery_address_4" type="text" value="">
          </div>
          <div class="my-2">
            <label for="delivery_address_postcode" class="">Delivery Postcode*</label>
            <input autocomplete="none" class="form-control" id="delivery_address_postcode" maxlength="10" minlength="6" name="delivery_address_postcode" required="" type="text" value="">
          </div>
        <input type="submit" name="submit" value="Send">
    </form>
  </body>
  <script>
    
      //generate a random string to append to the names
      const autocompleteString = btoa(Math.random().toString()).substr(10, 5);

      //get all the inputs in the form
      const inputs = document.querySelectorAll("input");

      //make sure script calls function after page load
      document.addEventListener("DOMContentLoaded", function(){
        changeInputNames();
      });

      //add random characters to input names
      function changeInputNames(){
        for (var i = 0; i < inputs.length; i++) {
          inputs[i].setAttribute("name", inputs[i].getAttribute("name")+autocompleteString);
          }
      }

      //remove the random characters from input names
      function changeInputNamesBack(){
        for (var i = 0; i < inputs.length; i++) {
          inputs[i].setAttribute("name", inputs[i].getAttribute("name").replace(autocompleteString, ''));
          }
      }
     
      
    function submission(){
      let valid = true;
      //do any additional form validation here
      if(valid){
        changeInputNamesBack();
      }
      return valid;
    }
    
  </script>
</html>

Answer 2

感谢@rydog 的帮助。我已将其更改为我放入 js 文件的函数，因为我不想手动添加到每个页面/在每个页面上触发 - 我还使用 js 添加了提交事件处理程序，而不是添加到在提交表单时。

Rydog 的出色解决方案


function stop_autofill() {

    //generate a random string to append to the names
    this.autocompleteString = btoa(Math.random().toString()).substr(10, 5);

    this.add_submit_handlers = () => {
        document.querySelectorAll("form").forEach(value => {
            value.addEventListener("submit", (e) => {
                this.form_submit_override(e)
            })
        })
    }

    //add random characters to input names
    this.changeInputNames = () => {
        for (var i = 0; i < this.input_elements_arr.length; i++) {
            this.input_elements_arr[i].setAttribute("name", this.input_elements_arr[i].getAttribute("name") + this.autocompleteString);
        }
    }

    //remove the random characters from input names
    this.changeInputNamesBack = () => {
        for (var i = 0; i < this.input_elements_arr.length; i++) {
            this.input_elements_arr[i].setAttribute("name", this.input_elements_arr[i].getAttribute("name").replace(this.autocompleteString, ''));
        }
    }

    this.form_submit_override = (e) => {
        e.preventDefault()
        this.changeInputNamesBack()
        e.currentTarget.submit()
        return true
    }

    this.setup_form = () => {
        //get all the inputs in the form
        this.input_elements_arr = document.querySelectorAll("input");
        this.changeInputNames();
        this.add_submit_handlers();
    }

    //make sure script calls function after page load
    this.init = () => {
        if (document.readyState === "complete") {
            this.setup_form()
        } else {
            let setup_form = this.setup_form
            document.addEventListener("DOMContentLoaded", function (e) {
                setup_form()
            })
        }
    }
}

在需要它的页面上

<script>
    af = new stop_autofill()
    af.init()
</script>

停止 chrome 按 id 自动填充/建议表单字段

Stop chrome auto filling / suggesting form fields by id

html

forms

google-chrome

autocomplete

工作原理