I have placed labels in my input fields to have explanatory text display in the background and when the user types in the field, the text disappears. I'm using the example explained here: How to create a label inside an <input> element?
and specifically at http://attardi.org/
When the password though is saved by the browser such as in Google chrome, the text becomes garbled as in this image (this is currently on my local computer):
The background text is not disappearing for saved passwords. Any help would be appreciative - thanks.
You could also take advantage of the new placeholder attribute. Read about it here.
No IE support, though.
Option 2 would be using Jquery. Since you're already using Jquery for the label solution, you could add code that checks the value of the input after the document has loaded then show or hide the label accordingly.
This code would go inside the document ready function:
$(function() {
// Handler for .ready() called.
});
Just use the placeholder attribute – it's so simple:
<input type="email" placeholder="email" />
Literally, that's it; the browser will take care of the behavior.
Yes, it won't work in IE (until IE10 is released) – but you've already got labels next to the fields anyway, so it's not like IE users won't be able to tell which fields are which.
I investigated further, and this only occurred in Google Chrome and not Mozilla Firefox. My setup was correct and looks like it might in fact be a bug in Chrome. See issue log: http://code.google.com/p/chromium/issues/detail?id=117661
This also looks like it will occur for the placeholder attribute too when Chrome tries to do password autosave process and doesn't look to see if there is a previous inputted value.
Thanks for the input from all.
Related
I am trying to submit the form but It won't. It is auto-fill the input area after submitting once. However, after auto-fill the input it does not enable the submit button.
As it works on the rest of the browsers.
I have tried to add autocomplete off attribute in form tag as well as input tag but no luck.
<form autocomplete="off" ....````
This works, but not the way that you think it does.
Officially it should be: autocomplete="off".
However many browsers bizarrely ignore this. Therefore it's best to just put some random string on the autocomplete section like:
autocomplete="autocomplete_off_randString"
Note that make sure the autocomplete value for each input is different (use JavaScript). Hence the random string at the end. Or else you may get suggestions from fields with the same autocomplete value.
in edge worked for me autocomplete="false" readonly onfocus="this.removeAttribute('readonly');" / according to this https://stackoverflow.com/a/30344707/14913109
try to use autocomplete="new-password"as describe here
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.
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.
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 .
I have to set placeholders in textareas on a form using IE9. The problem im getting is that when the page is loaded, the text from the placeholder is being writen on the textarea rather than just being showed as just a gray text that disapears when the user write something on it. BUT, if I erase the text that is automatically writen, the placeholder works normally. Is this a common error? Is there a easy way to fix this?
IE9 doesn't support placeholder attribute. See here
You will need to use JavaScript.
See here