I have an input tag which acts as a search box. But before that I have two input tags through which the credentials is given which gets saved in chrome browser. Now when the search box gets rendered it gets rendered with the autofill value of the username which was saved in the browser previously. My requirement is the autofill for the search input tag should not take place. I had used the following attributes for the search input tag but still it is not getting resolved.
<input type="text" spellcheck="false" autocomplete="off" name="my_custom_name">
Can anyone please provide me with a solution?
The latest way to do this is,Just simply use type search
<input type="search" />
autocomplete="off" toggles the application auto complete. Chrome browser has "Auto-fill" feature, where users can enable/disable. Hope you are not talking about this.
I'm building a site locally and in one form I have a phone number input and a password input. Chrome is pre-filling these fields, the phone number with my email address, and the password field with a password as shown.
This is a registration page so I don't want the password field pre-filled and the phone number should not contain an email address.
This is the markup of these inputs:
<input type="tel" value="" id="phone" name="phone" class="input ">
<input type="password" placeholder="Min 10 characters" id="password" name="password" class="input ">
Things I have tried to disable chrome autocomplete, all of which have had no effect:
Adding the autocomplete="off"/autocomplete="false" to both the inputs themselves and the outer form element.
Cleared autocomplete data from browser history from the beginning of time.
Changing the ID and the name attributes of the inputs in question.
The only thing that prevents chrome autocompleting the input is to add another phone input before and style it as hidden, which is a horrible hack I want to avoid.
What is the cause of chrome inserting an email address into a tel input with name phone? How can I prevent this behaviour?
I'm not worried about completely disabling autocomplete but I don't want it inserting email addresses into phone-number inputs.
Open Chrome.
At the top right, click Settings.
At the bottom, click Show advanced settings.
Under "Passwords and forms," click Manage Autofill settings.
Point to the entry (in your case: phone-number inputs) and click
Delete Close.
Note: email addresses has been filled in the phone number input field instead of phone number.
We have a HTML form that has an input element with the required attribute set:
<input ui-date="dateOptions" id="ExpiryDate" name="expiryDate"
class="form-control hasDatepicker" required="">
When a user attempts to submit the form in Internet Explorer with the field empty, they get a prompt bubble noting "This is a required field". However, the bubble appears in front of the calendar picker and cannot be dismissed by the user, making the calendar picker of limited use.
Is there any way to control either the position of the prompt, or its behaviour, without removing the required attribute altogether?
I would like to enable browser's autofill option by using the autocomplete attribute.
According to https://html.spec.whatwg.org/multipage/forms.html#autofill
<input autocomplete="given-name">
<input autocomplete="family-name">
<input autocomplete="address-line1">
The given-name and family-name should autofill the first and last name (western culture). I can get this to work if I add another field on the form for the address line. However, the form on my website does not have an address field, only first and last name.
This works, but I cannot use:
https://jsfiddle.net/gt6m1bgj/5/
This does not work, and I need it to:
https://jsfiddle.net/em8p92sb/1/
Any ideas?
Both your cases are working for me in Chrome 51 (OSX) And Safari 9.1.1
I had a quick look to see if I could find a chrome bug that had been resolved since your question, but quickly gave up on that :)
Another useful reference is: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill?hl=en
Autocomplete attribute only works with on and off value, also it require name attribute in input.
<input autocomplete="on" name="name">
The autocomplete attribut tag use just 2 values : On and Off and the default is on.
You dont need do to something !
Look : http://www.w3schools.com/tags/att_input_autocomplete.asp
My Problem
I must have turned on google to autofill for a login on my site, however it is trying to now autofill that login data whenever I want to edit my account info or edit another users account info (as an admin). It fills in my data in weird spots. The issue seems to be that Chrome auto fills any input with a type of password and then whatever the input before it is (see image below). If I put a select box before it then it won't autofill.
I obviously don't want to have to go through and delete the password/phone every time I edit a user. I also don't want my users to have to do that when they are editing their own account. How do I remove it?
What I have tried (with no success)
Adding autocomplete="off" to the form as well as both the phone and password inputs.
Adding value="" to both inputs
Changing the name= of the password input. I tried pw, pass, password, and cheese (incase chrome was picking up the name)
Adding autocomplete="off" through the jquery .attr
What I have found
I found that Google may be intentionally ignoring autocomplete: Google ignoring autocomplete
I found another user posting a similar question but the solution is not working for me: Disable Chrome Autofill
I also found another user doing a work around involving creating a hidden password field which would take the google autocomplete, I'd prefer a cleaner solution as in my case I would also need a hidden input above it to avoid both from autofilling: Disable autofill in chrome without disabling autocomplete
In HTML5 with autocomplete attribute there is a new property called "new-password" which we can use to over come this issue. Following works for me.
<input id="userPassword" type="password" autocomplete="new-password">
current-password :
Allow the browser or password manager to enter the current password for the site. This provides more information than "on" does, since it lets the browser or password manager know to use the currently-known password for the site in the field, rather than a new one.
new-password :
Allow the browser or password manager to automatically enter the new password for the site. This might be automatically generated based on the other attributes of the control, or might simply tell the browser to present a "suggested new password" widget of some kind.
Refer: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
This can be solved without hacks, but it is not necessarily intuitive. There are two weird decisions that Chrome makes. First, Chrome ignores autocomplete="off" in its parsing, and second, Chrome assumes the field that comes before a password field must be a username/email field, and should be autocompleted as such.
There are ways around this though that leverage the HTML5 autocomplete attribute spec.
As you will see in the link below, there are standard values for the attribute autocomplete. To avoid having Chrome assuming the field before a password is an email field, use either one of the official values (e.g., tel for a phone number), or make up a value that does not exist on the list, but is also not off or false.
Google suggests you use one of the standard values with new- prepended to the value, e.g., autocomplete="new-tel". If you want a password field to not autocomplete, you can use autocomplete="new-password", for instance.
While technically you could of course make the attribute something random without context to the same effect (e.g. autocomplete="blahblahblah"), I recommend the new- prefix as it helps give any future developer working on your code some context of what you're accomplishing with this attribute.
Ref: https://html.spec.whatwg.org/multipage/forms.html#autofilling-form-controls:-the-autocomplete-attribute
Sometimes even autocomplete=off would not prevent to fill in credentials into wrong fields, but not user or nickname field.
Fix: browser autofill in by readonly-mode and set writable on focus
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
(focus = at mouse click and tabbing through fields)
Update:
Mobile Safari sets cursor in the field, but does not show virtual keyboard. New Fix works like before but handles virtual keyboard:
<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
this.removeAttribute('readonly');
// fix for mobile safari to show virtual keyboard
this.blur(); this.focus(); }" />
Live Demo https://jsfiddle.net/danielsuess/n0scguv6/
// UpdateEnd
Explanation: Browser auto fills credentials to wrong text field?
#Samir: Chrome auto fills any input with a type of password and then whatever the input before it is
Sometimes I notice this strange behavior on Chrome and Safari, when there are password fields in the same form. I guess, the browser looks for a password field to insert your saved credentials. Then it autofills username into the nearest textlike-input field , that appears prior the password field in DOM (just guessing due to observation). As the browser is the last instance and you can not control it,
This readonly-fix above worked for me.
fake inputs dont work
autocomplete="off" / "new-password" / "false" and so on dont work, chrome ingores them all
Solution that worked for us:
<script>
$(document).ready(function(){
//put readonly attribute on all fields and mark those, that already readonly
$.each($('input'), function(i, el){
if ($(el).attr('readonly')) {
$(el).attr('shouldbereadonly', 'true');
} else {
$(el).attr('readonly', 'readonly');
}
});
//Remove unnecessary readonly attributes in timeout
setTimeout(function(){
$.each($('input'), function(i, el){
if (!$(el).attr('shouldbereadonly')) {
$(el).attr('readonly', null);
}
});
}, 500);
});
</script>
Following #Rob Porter feedback, in my case this was happening on a single input field (a PIN field), where password was being suggested and other field in the form was being populated.
Solved the issue by adding a dummy input field right before the PIN input as such:
<input id="pin-dummy" name="pin-dummy" type="text" style="opacity:0%;width:1px;height:1px;position:absolute;left:0px;top:0px" />
<input id="pin" name="pin" type="password" autocomplete="new-password" />
Chrome has updates, fake inputs are not working any more.
Chrome seems to remember everything after an success 200 net connection, whatever input[type=password] is activated on the screen will be remembered.
I've tried dynamically set the inputs to type text, clearing the contents, they don't always work, especially when there is a button to get verify code before submitting the form.
Finally, I figured it out:
listen to inputs focus and blur events,
everytime blur:
var psw1 = $('input[name=psw1]').val();
$('input[name=psw1]').val((new Array(psw1.length)).join('*'));
$('input[name=psw1]').attr('type', 'text');
everytime focus:
$('input[name=psw1]').attr('type', 'password');
$('input[name=psw1]').val(psw1)
the side effect is obvious, input's content would change every focus and blur event, but this method prevent chrome from remembering password perfectly.
Opacity
We fixed this by adding a field and setting its opacity to 0. so chrome still think there is a field an filling it.
width: 0px !important;
height: 0px !important;
opacity: 0 !important;
I noticed that Chrome / FF browser ALWAYS auto-filled the text input immediately preceding the password field. So the simplest solution was to add a "dummy" input:
I handle this problem with some simple js
<input type="password" name="password" class="autocomplete-off" readonly="readonly">
// autocomplete
$('input.autocomplete-off').click(function () {
$(this).removeAttr('readonly');
});
On my side the situation have been resolve by surronding my input with a form autocomplete="off".
<form autocomplete="off">
<input placeholder="Ville" type="text" class="w3-input town-input" type="text" />
</form>
Working fine !!!!