CODEWITHSUNDEEP
jqueryhtmlcss
user9953513
user9953513

Reputation:

how to disable autofill for specific input field

I'm using input field to get zip code using google api, I tried to stop autofill by using autocomplete="off" but still have the previous inputs

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

Upvotes: 1

Views: 1516

Answers (3)

Rocket Fuel
Rocket Fuel

Reputation: 508

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 &#8204; 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 &#8204; 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!

Upvotes: 1

ina
ina

Reputation: 19534

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.

Upvotes: 2

Sujan Gainju
Sujan Gainju

Reputation: 4769

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>

Upvotes: 2

Related Questions