当前位置： 文江博客话题详情

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

发布于 2025-01-15 23:44:03 字数 1135 浏览 1 评论 0原文

好吧……就像许多其他帖子一样，这让我发疯。 Chrome 不断为我不希望出现的字段提供自动完成建议。它与软键盘一起占据了整个页面，阻挡了用户的视图/表单并不是为了填充我们的用户数据，而是一个以前未知的新地址。

到目前为止，我已经在

和

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

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

即下面将给我一个我以前使用过的名称列表。

任何人都可以建议一种方法来阻止这种情况而不重命名元素吗？它们与我的数据库中的字段绑定在一起，理想情况下我不必手动重命名并将它们匹配在一起。

示例 -

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

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

https://jsfiddle.net/6bgoj23d/1/ 例如，删除标签/ ids/ name attr 时不会自动完成 - 不会自动完成

示例

在此处输入图像描述

原文

Ok so...like many other posts this is driving me nuts. Chrome is continually offering autocomplete suggestions for fields that I would rather it not be on. It, along with the soft keyboard take up the whole page which blocks the view for the user / the form is not intended to fill our the users data but rather a new address that would be previously unknown.

So far I've got these both on

<form autocomplete="off">

and

<input autocomplete="randomstringxxx">

Their effect is noticed and chrome is no longer filling the whole form - but it STILL wants to suggest single field suggestions for each element in my form.

I've finally realised that its now picking up the id/name fields from my form elements.

i.e the below will give me a list of names I have used before.

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

Can anyone suggest a way to stop this without renaming the elements? They are tied to fields in my database and ideally I would not have to manually rename and match up these together.

example -

https://jsfiddle.net/drsx4w1e/
with random strings as autocomplete element attribute - STILL AUTOCOMPLETING

https://jsfiddle.net/drsx4w1e/1/
with "off" as autocomplete attribute. - STILL AUTOCOMPLETING

https://jsfiddle.net/6bgoj23d/1/
example no autocomplete when labels / ids/ name attr are removed - NOT AUTOCOMPLETING

example

enter image description here

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

审判长 2025-01-22 23:44:03

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

这个解决方案全部采用 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>

I know this isn't ideal because it changes the name of the inputs but it only does it temporarily. Changing the name attribute is the only way I found that completely removes the autocomplete.

This solution is all in JS and HTML but I think it would be better if it was implemented with a server side language such as PHP or Java.

I found autocomplete="none" works best for chrome but it doesn't fully turn off auto complete.

How it works

So, on page load this solution adds a string of random characters to each input name.

eg. 'delivery_contact_name' becomes 'delivery_contact_nameI5NTE'

When the form is submitted it calls a function (submission()) which removes the random character that were added. So the submitted form data will have the original names.

See solution below:

<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>

回复 原文
半窗疏影 2025-01-22 23:44:03

感谢@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>

Thanks to @rydog for his help. I've changed it into a function that I've put into a my js file as I didn't want to manually add to each page / fire on every page - I have also added the submit event handler with js rather than adding to the on submit of the form.

GREAT SOLUTION by 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()
            })
        }
    }
}

on the page that needs it

<script>
    af = new stop_autofill()
    af.init()
</script>
回复 原文
~没有更多了~

关于作者

月隐月明月朦胧

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文