如何禁用特定输入字段的自动填充

Question

我正在使用输入字段使用 google api 获取邮政编码，我尝试使用 autocomplete="off" 停止自动填充，但仍然有以前的输入

 <input  onClick="this.select();" type="text" id="postal_code" name="postal_code" autocomplete="off" onFocus="geolocate()">

Answer 1

You are using autocomplete attribute in the input fields. You should be using that in the <form> tag to toggle the autocomplete.

 <form action="#" method="get" autocomplete="off"> First name:<input type="text" name="fname"><br> </form> <br> <br> <form action="#" method="get" autocomplete="on"> First name:<input type="text" name="fname"><br> </form>

Answer 2

1. For sure you can use autocomplete in input tags.
2. And its not right to add couple of form tags like this.
3. If you can show the full form code...if possoble

Answer 3

Here's the perfect solution that will work in all browsers!

TL;DR

Rename your input field names and field ids to something non-related like 'data_input_field_1' . Then add the ‌ character into the middle of your labels. This is a non-printing character, so you won't see it, but it tricks the browser into not recognizing the field as one needing auto-completing, thus no built-in auto-complete widget is shown!

The Details

Almost all browsers use a combination of the field's name, id, placeholder, and label to determine if the field belongs to a group of address fields that could benefit from auto-completion. So if you have a field like <input type="text" id="address" name="street_address"> pretty much all browsers will interpret the field as being an address field. As such the browser will display its built-in auto-completion widget. The dream would be that using the attribute autocomplete="off" would work, unfortunately, most browsers nowadays don't obey the request.

So we need to use some trickery to get the browsers to not display the built-in autocomplete widget. The way we will do that is by fooling the browser into believing that the field is not an address field at all.

Start by renaming the id and the name attributes to something that won't give away that you're dealing with address-related data. So rather than using <input type="text" id="city-input" name="city"> , use something like this instead <input type="text" id="input-field-3" name="data_input_field_3"> . The browser doesn't know what data_input_field_3 represents. But you do.

If possible, don't use placeholder text as most browsers will also take that into account. If you have to use placeholder text, then you'll have to get creative and make sure you're not using any words relating to the address parameter itself (like City ). Using something like Enter location can do the trick.

The final parameter is the label attached to the field. However, if you're like me, you probably want to keep the label intact and display recognizable fields to your users like "Address", "City", "State", "Country". Well, great news: YOU CAN! The best way to achieve that is to insert a Zero-Width Non-Joiner Character ‌ as the second character in the label. So replacing <label>City</label> with <label>C&#8204;ity</label> . This is a non-printing character, so your users will see City , but the browser will be tricked into seeing C ity and not recognize the field!

Mission accomplished! If all went well, the browser should not display the built-in address auto-completion widget on those fields anymore!

Hope this helps you in your endeavors!

Answer 4

Try adding this to your input tag: autocomplete="__away"

Chrome somehow does not follow the autocomplete="off" directive, and so we have to use this workaround doing an undefined value.