How to disable the address autocomplete for an input on Chrome? - javascript

I started with this solution:
<input autocomplete="off"/>
which worked for current safari and firefox, and some chromes. But then I am now trying to do this:
<input autocomplete="hello-<timestamp>-<randomnumber>"/>
That works for firefox, chrome, and safari on Mac, but not for windows. I only want to disable some of the inputs in a form, not all.
How do I get this to work on Chrome for Windows?
This is for a non-password field, like a phone number or username. I understand that you can't really disable autocomplete for passwords these days.

Add to all fields autocomplete="off". Then check which fileds still perform an autocomplete (for the address), and set the ones to autocomplete="address-level4" (thank you #michael crenshaw).
Also I found out, that the autocpmlete happens depending on the naming of the id of the input. So if you want to disable it just do not set the id (which probably isnt what you want depending on how you process the input, thus this is not really a good clean solution).

Related

Primefaces editable p:selectOneMenu chrome autofill problem

I am trying to cancel chrome autofilling on my inputs using autocomplete="off". I have a case of a <p:selectOneMenu> which have the attribute editable=true. Then, when I focus on the field, chrome autocomplete propose some past texts. How can I cancel this autofilling knowing that the attribute autocomplete is not available for <p:selectOneMenu>?
I have already tried to manage it through javascript, but the onfocus attribute concern dropdown click and not input area focus.
Unfortunately this is not PrimeFaces related. It is that Chrome AutoFill has been a mess over the years.
Here is the thread you want and look at how many times its been updated or answers changed just in the last 3 years.
Disabling Chrome Autofill
Basically Google has gone back and forth about allowing the developer to control what gets autofilled or not and for a while they completely ignore autocomplete="off" saying developers shouldn't decide what a user wants. Then they added some new auto-complete flags. Its a 100% mess in my opinion.

How do I stop browsers for suggesting inputs for fields?

I have an input text field, when user enters any alphabet/word, I have to suggest relevant topics.
The problem here is, the browser is also doing the same thing. It is showing previously entered data, which overrides the information shown in the site.
PFB the image, the circled black d, is a suggestion by browser (firefox in this case) and below list, (Git-Commands, Equals Method etc) is shown by me.
I want browsers to stop showing suggestions for this particular field.
How to do that?
The site is build in simple HTML and JavaScript.
Reference The searchbox on homepage on : mohitkanwar.com
PS: I have tried using autocomplete="off" . It does not work here, as it is not autocomplete, it is suggesting.
<input autocomplete="off">
Should do it. It will NOT work on login-fields, however, as most Browser vendors decided to ignore the setting there. Further Information:
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
Use the autocomplete attribute, see http://www.w3schools.com/tags/att_input_autocomplete.asp for details.

HTML disable wrong autocompletion

I am currently working on an Angular web-application.
This application consists of two single-page-applications:
- Login-Page, accessible over "domain/login.html", containing login-logic.
- Application-Page, accessible over "domain/", containing the concrete application.
If you try to access "domain/", the server redirects you to "domain/login.html", if you are not logged in yet. Otherwise you will get the Application-Page (no redirect).
In the concrete application there is a Change-Password-Page, where you have to enter the old password and the new password (twice).
The problems start, if you say "save password" on the login-page. The saved password is automatically filled inside the "Old-Password" field.
Also there is another page having a text field and a password field directly after each other (where the text-field is for a phonenumber) and the browser inserts the username into the "phonenumber"-field and the password inside the password field. This is really strange, as the fields have different names and ids and are even on another page (again one is "/login.html" and one is "/")
As this behaivor is incorrect i would really like to disable it. However I was not able to do that until now.
What i tryed:
autocomplete=off, for form and input-tags. This seems to be ignored by most modern browsers.
Two hidden (display:none) input-fields (text + password) on first position. Seems to work for Firefox, but Chrome and Opera still give you the possibility to autocomplete the fields.
Use type="text" for password-field and change it to password inside javascript-code. Again Opera and Chrome still give possibility to autocomplete those values.
So I am looking for a (clean) solution to turn off the wrong autocompletion.
Is that somehow possible?
I have been encountering this issue lately, specifically with chrome. It seems that
autocomplete="off" || autocomplete="false"
are not being picked up anymore by Chrome (or most other browsers as far as i'm aware). I found the following sources helpful :
Chromium (which i believe is what a lot of Chrome is based on) has the following code that shows the regex that is used when finding fields to populate with Chrome's autocomplete:
https://cs.chromium.org/chromium/src/components/autofill/core/common/autofill_regex_constants.cc?sq=package:chromium&g=0&l=262
I feel like they only other work around that I have found is to follow these conventions :
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
Or at least make sure that you give an attribute that's disimilar enough from the above list so it that wont get picked up by autocomplete features.

Chrome credit card autofill not being triggered

I followed the advice given in this other Stack Overflow post and used a pattern found in the list of regexes used by Chrome, but for some reason Chrome is still not detecting that my field is a credit card field.
Safari detects it just fine.
Here's the input HTML, as shown by the web inspector:
<input class="control" id="card_number" type="tel" name="card_number"
value="" autocorrect="off" spellcheck="off" autocapitalize="off"
placeholder="Card number" data-reactid=".0.1.1.0.0.5.0.0"
x-autocompletetype="cc-number" autocompletetype="cc-number">
Yes, as you can see from the data-reactid, I am using React. Maybe that has something to do with it. Who knows!
I've set up a test page so that others can play with it. You can visit https://entire.life/payment-form-test in Safari, and (if you have autofill enabled and a credit card saved to it), it will pop up. If you visit it in Chrome, it will not pop up the autofill option. Even after typing the first letter of your card.
This code is open source. You can see the source for the /payment-form-test page here.
It will work if you add following attributes to respective input elements:
autocomplete="cc-number"
autocomplete="cc-exp"
autocomplete="cc-csc"
Also I noticed that Chrome will not autocomplete if one of the cc fields is missing.
You can play around here - https://jsfiddle.net/q4gz33dg/2/
Name your expiration fields card_expiry_month and card_expiry_year. I'm not sure why your current names don't trigger the regex, but changing the names seems to work.
http://jsfiddle.net/7b6xtns7/ (it's a bit messy since it's not rendered)
Edit:
Looks like ordering has to do with it too. If that doesn't work try putting the month/date immediately after the number entry field
http://jsfiddle.net/c86Lmo0L/
The accepted answer is great, thought I'd just chime in with some documentation and a note regarding React (tagged for this question)..
React requires you to pass the attribute as autoComplete="cc-number" (note camelCase), otherwise it will default to autocomplete="off".
More info:
React attributes: https://facebook.github.io/react/docs/tags-and-attributes.html
Useful examples: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
https://html.spec.whatwg.org/multipage/forms.html#autofill
I can confirm that. For instance, some websites only have autocomplete without any value as tag attribute.
By opening the web dev console (CTRL + SHIFT + I) I could jump to the element, double click the autocomplete tag to replace it autocomplete="cc-number", and double click in the field to autocomplete the CC details by the opening selection dialog.
All that alteration can still be much faster than fiddling with the credit card details from another app or physically holding the card .

Read-only input in Android Webkit not working

I have a text input field in my web page that I am using to collect a date (via the jQuery Tools .dateinput). The user does not need to be able to type into the field. A dialog box appears when the field is clicked on. This is a problem on my Motorola Droid, because I don't want the soft-keyboard to appear when the field is clicked.
I have tried input.blur() on focus and also setting the field to disabled and readonly. Setting the field to disabled has undesired side effects. Setting the field to readonly works in everything but the Android browser. The browser seems to recognized the "readonly" attribute (or readOnly via javascript), BUT the field does not actually become readonly. When you click it, the soft keyboard still appears and allows you to change the field.
I suppose that this is a bug in the Android browser. Can anyone come up with a clever alternative?
I used a workaround - since I didn't need to actually edit in the input field (like you, I was popping a date picker), I changed to a span with similar styling. The code is kind of trivial once you have the trick, and it's really app specific so I don't have any really for you to see.

Categories

Resources