I have tried using autocomplete false and also auto complete off. The cache is removed from the field, but iam still seeing chrome autofill data. Is there a way to disable chrome autofill option in angular forms? Any suggestions would be appreciated. Thanks
Please check the autocomplete="new-password":
<input type="password" name="password" value="" autocomplete="new-password" />
It worked for me. Found in Google documentation
The autocomplete="off" is effectively respected by Chrome, but what you're experiencing is the Chrome autofill functionality that takes over, ignoring autocomplete="off": https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill.
In the past, many developers would add autocomplete="off" to their form fields to prevent the browser from performing any kind of autocomplete functionality. While Chrome will still respect this tag for autocomplete data, it will not respect it for autofill data.
One workaround is to put an unknown value in the autocomplete, e.g. <input type="text" name="somethingAutofillDoesntKnow" autocomplete="doNotAutoComplete" />. When testing this it worked for me most of the time, but for some reason didn't work anymore afterwards.
My advise is not to fight against it and use it's potential by properly using the autocomplete attribute as explained here: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
Through some trial and error testing, it appears that if you set the input name and autocomplete attributes to a random string, Chrome's autofill is prevented from appearing. I created a small directive to achieve this.
import { Directive, ElementRef, Renderer2, AfterViewInit } from '#angular/core';
#Directive({
selector: '[appDisableAutofill]'
})
export class DiableAutofillDirective implements AfterViewInit {
constructor(private readonly el: ElementRef, private readonly renderer: Renderer2) { }
ngAfterViewInit() {
const randomString = Math.random().toString(36).slice(-6);
this.renderer.setAttribute(this.el.nativeElement, 'name', randomString);
this.renderer.setAttribute(this.el.nativeElement, 'autocomplete', randomString);
}
}
Just change your input from type TEXT to type SEARCH.
<input type="search" name="your_address" autocomplete="nope" />
Chrome fill work with text fields but it's ignored on search type.
Chrome seems to ignore all practical/clean attempts to stop this - so we need to get a little hacky. I prevented this using 2 honeypot inputs. They can NOT be "display:none" or they will get skipped. So I wrapped them in a div that's height:0; overflow:hidden; and gave them opacity 0 (just to be double sure). Your real inputs must come AFTER the honeypots. See below
<!-- honeypot prevents chrome user autofill bs-->
<div style="height:0; overflow:hidden">
<input style="opacity:0;" type="email" value="" class="" />
<input style="opacity:0;" type="password" value="" class="d-" />
</div>
<!-- end honeypot -->
<!-- ... then put your real inputs after-->
<input type="email" name="email" value="" class="" />
<input type="password" name="password" value="" class="d-" />
<!-- end honeypot -->
Disabling autocompletion
To disable autocompletion in forms, you can set the autocomplete attribute to "off":
You can do this either for an entire form, or for specific input elements in a form:
<form [formGroup]="exampleForm" autocomplete="off">
...
</form>
// or
<form [formGroup]="exampleForm">
<div>
<label >Credit card:</label>
<input type="text" id="cc" name="cc" autocomplete="off">
</div>
</form>
To Disable in Login Fields:
many modern browsers do not support autocomplete="off" for login fields:
to prevent autofilling of password fields, you can use
autocomplete="new-password"
I had similar issue, I was not able to resolved it with any of the solution maybe because I was using third party for Google places Autocomplete ngx-google-places-autocomplete
where autofill overlapping google suggested address. I was able to resolve it using focus event as shown below
<input ngx-google-places-autocomplete [options]='options' #placesRef="ngx-places" (onAddressChange)="handleAddressChange($event)"
type="text" class="form-control" id="address1"
formControlName="address1" placeholder="Street address, P.O. box" required (focus)="setAutoFillOff($event)">
setAutoFillOff(event: any) {
if (event) {
event.target.attributes['autocomplete'].value = 'chrome-off';
}
}
I am putting out this to helps who might be in similar situation.
It appears that autocomplete="off" can be used directly on form tag.
Useful when you have a lot of text inputs
<form [formGroup]="vmForm" autocomplete="off">
Google Chrome Version 78.0.3904.108
TLDR; Don't label your inputs with obvious names or Chrome will pick that up and autofill the input.
I often use a form-group class to wrap my labels and inputs together, pretty common practice. So much so the only way I found to get around AutoFill in Chrome (Angular 8, Chrome v80) was to change the value of my label for the input.
Turns Off AutoFill:
<div class="form-group">
<label for="aRandomPlace" class="form-group-label">Pickup Location</label>
<input type="text" name="aRandomPlace" [(ngModel)]="data.address" class="form-group-input">
</div>
Does Not Turn Off AutoFill:
<div class="form-group">
<label for="address" class="form-group-label">Pickup Address</label>
<input type="text" name="address" [(ngModel)]="data.address" class="form-group-input">
</div>
I believe we are discussing to disable 'autosuggestions' not 'autocomplete'
"Autocomplete=off" works for the text type input field but the browser ignores it if it is password type. there are lot many suggestions to use "Autocomplete='chrome-off', 'new-password'" but these are not meant to disable autosuggestions.
for these, I prefer masking technique to mask the content.
.autocompleteOff{
-webkit-text-security: disc;
}
<input class='autocompleteOff' type=text>
Just add to all the HTML input tag which is being auto filled within a form tag as bellow:
<input type="text" class="form-control" id="inputId"
name="inputName" autocomplete="new-inputName"
[(ngModel)]="model">
Note: Use "new-form_element_name" as autocomplete property as shown above.
It worked for me!!!
I found the answer in documentation and it works like a charm.
You can find more about it here.
<input type="text" autocomplete="off" name="one-time-code" id="one-time-code">
Usually what I do is I change type of input dynamically for example in Angular:
[type]="(field.length > 0)? 'password' : 'text'"
In this manner, the browser is unable to recognise the password field the first time you click it and will not provide a suggestion. However, if the field value has been input once and then erased, the browser will provide a suggestion. (At least it is not providing suggestion for the first time).
I am creating a sign up form in PHP. Every time I click on sign up button the browser asks to save the email and password. How can I stop this?
As of April 2016, this is browser-level behaviour and the user's reponsibility to control.
Two things you can do are:
You can inform the user on how to prevent this message displaying and
File a complaint with the browser devleopment team to urge them to change the behaviour. If enough people want it changed then it will be changed.
You can use autocomplete="off" on input fields like this
<input type="text" name="Username" autocomplete="off">
<input type="password" name="Password" autocomplete="off">
or on the form tag. May not work on all browsers.
Please refer to http://caniuse.com/#search=autocomplete on supported browsers.
This code solves my issue. I have just add
readonly onfocus="this.removeAttribute('readonly');"
besides
autocomplete="off"
And input should look like this
<input type="text" name="UserName" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
<input type="password" name="Password" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
Add attribute autocomplete="off" in form tag
-----
I have a Webview Page contains HTML5 and javascript. For a particular Input Textbox I don't want the Android Default keyboard to appear. How to achieve that?
I know using webview is not good for this kind of app but I have to use for my App, please help.
If you mean that you want a specific input like numbers or email keyboard, then maybe this page can help:
http://blog.teamtreehouse.com/using-html5-input-types-to-enhance-the-mobile-browsing-experience
posibilities:
<input type="email" name="email">
<input type="url" name="url">
<input type="tel" name="tel">
<input type="number" name="number">
<input type="date" name="date">
<input type="time" name="time">
<input type="datetime" name="datetime">
<input type="month" name="month">
If you want to hide it completely you can look at this post:
HTML Mobile -forcing the soft keyboard to hide
Html5 form validation uses the browser (or os?) language, but I have an English website for mostly Duch users.
So all validation messages should be in English.
How can I change the language for these validation messages?
This is not a duplicate, I know I can set my own custom messages.
I don't need this, I just want to set the correct language, if that's possible.
Use the title tag to display the custom message:
<input type="text" required title="Mijn aangepaste boodschap" />
EDIT
#Denis Chenu is right, this is not the correct solutions, this post has a correct javascript solution: changing the language of error message in required field in html5 contact form
So this is a duplicate and can be closed?
document.getElementById('fname').setCustomValidity('Dit is verplicht kut');
<form>
<label for="fname">First name:</label><br>
<input required type="text" id="fname" name="fname" title="Vul dit veld in kut"><br>
<label for="lname">Last name:</label><br>
<input required type="text" id="lname" name="lname">
<button type="submit">Submit</button>
</form>
I'm creating my page using Javascript. It is a login page and I need to use autofocus on username input text. This operation works on IE and Chrome, but doesn't on Mozilla!
This is the HTML I have been adding using JS:
'<input id="username" class="loginInput" data-bind="value: userName, valueUpdate: \'afterkeydown\'" type="text" name="User" autofocus><!--User Input text end /-->'
When i load the page with Mozilla this input is set this way:
<input id="username" class="loginInput" type="text" autofocus="" name="User" data-bind="value: userName, valueUpdate: 'afterkeydown'">
I really can't understand why autofocus attribute is set in that way. I even tried by adding the attribute using JQuery $("#username").attr('autofocus','autofocus') and works only on Chrome and IE.
The second problem comes when I go to the login page from another page and autofocus issue comes with every browser.
Can you help me?
You can try with:
$("#username").focus();
after the page has been loaded.
Instead of using the autofocus attribute, try:
$("#username").focus();