Chrome email field autocomplete options not showing for my website - javascript

As I visit many new websites for the first time, I see that:
For some websites, putting my cursor in the email field of signup form immediately shows me email options from what I had entered in other websites.
For other websites, putting my cursor in the email field does not give me any email options. And, I have to manually type every letter of the email.
I couldn't find what piece of code differentiates the two cases. For my website, I am stuck with #2. I am trying to achieve #1, where user can just re-use emails entered in other websites.
I used some code like this:
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="email">

It seems that you want to enable autocomplete, but you have specified the wrong attribute.
SYNTAX:
Autocomplete="on | off"
In order to save the email address entered for the first time though, you need to have a form tag with the attribute method="POST" on it. It is also recommended to use the autocompletetype attribute to help the browsers populate the forms more accurately.
NOTE: In some cases on older browsers you may also need to add an action if the form doesn't have one. action="javascript:void(0)" works.
An example with autocomplete on and method="POST":
<form method="POST" action="javascript:void(0)">
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="on" autocompletetype=”email”>
<input type="submit">
</form>
An example without autocomplete and method="POST":
<form>
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="off">
<input type="submit">
</form>
See also How to trigger Autofill in Google Chrome?

Difference is in autocomplete attribute of input element.
Syntax : <input autocomplete="">
It allows the browser to automatically filled the input field based on the previously filled data.
Hence, In #1 value of autocomplete attribute should be on.
DEMO
E-mail: <input type="email" name="email" autocomplete="on">
In #2 value of autocomplete attribute should be off.
DEMO
E-mail: <input type="email" name="email" autocomplete="off">

The answers so far are wrong/outdated or incomplete.
Using autocomplete="email" is perfectly valid. But the browsers do not handle it very well at the moment. In Firefox and Chrome, only the name attribute is used for autocompletion. So you should stick with name="email".
If the Chrome user really wants to have a proper autocompletion for every type that autocomplete supports, he/she has to fill out the Autofill settings. After these settings are filled, the autocompletion does not depend on the name attribute anymore, but uses the type of autocomplete. I.E. it will suggest the user's email address for fields with autocomplete="email".
So in order to have the best browser support, you should keep <input name="email" autocomplete="email" [...]>. As soon as there has been at least one submitted form with name="email" or prefilled Autofill settings, the browser should actually autocomplete your input field.
Further Resources:
caniuse: autocomplete attribute: on & off values
caniuse: input[autocomplete] (values besides on/off)
For some websites, putting my cursor in the email field of signup form immediately shows me email options from what I had entered in other websites.
I cannot reproduce that on the latest Chrome on Mac OS X. You actually have to doubleclick the input for the autocompletion to show up.

The correct values for the autocomplete attribute is "on" or "off" as you can see at : https://www.w3schools.com/Tags/att_input_autocomplete.asp

Use autocomplete="on" in form tag. like below.
<form action="" method="post" autocomplete="on">
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required>
<input type="submit" value="Submit">
</form>

Related

Is there a way to disable chrome autofill option for angular form fields

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).

How to empty retained value of email field on browser back on edge?

I am using the following code to prevent value to be retained in the email field when I am pressing the back button on Edge browser.
<form>
<input autocomplete="off" type="email" name="email" value="" id="Email123" placeholder="email" />
</form>
<form autocomplete="off">
<input type="email" name="email" value="" id="Email123" placeholder="email" />
</form>
When I make use of autocomplete="off" in the form tag, it is of no use and the code does not work. Same is the case with input tag. The code is not working in either case.
How do I clear the email field when I click the back button on Edge browser?
You could empty it in JS when the page loads.
document.getElementById('Email123').value = '';
this will only remove the autofilled text and not the default styles that go along with it on the input.
Try to set autocomplete to a random invalid string value, like autocomplete="nope"
Source: https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

How do I disable browser's "save your password" option from my website's users?

I have a login for like this:
As you see, my username and password are saved in those inputs. I want to know, is that possible to disable saving password property of the browser by JS or HTML or whatever?
Note: Using autocomplete attribute isn't useful to do that:
<form autocomplete="off" ...>
<input name="username" placeholder="Email" type="email" autocomplete="off" />
</form>
As you see, both the form and the input have autocomplete="off" attribute, but still saving password happens.

Need a field description inside an input field without sending it

I have a contact form and I want the descriptions of the fields inside the input field. If I add the description by "value" I got the problem that this value will be send and an other problem is that this value will not be hide if I click inside the input field.
Is there any easy solution?
Thats the simple input field I talking about: jsfiddle.net/gefxo2s3/
<input type="email" name="email" id="email" class="textinput" value="Your E-Mail">
The HTML5 placeholder attribute
<input type="email" name="email" placeholder="Your Email">
is what you are looking for. Works in most browsers [browser support stats], but there are polyfills for those browsers that don't support it. I suggest this one

How do you disable input value on web form field / input tag?

How do you disable the autocomplete functionality in the major browsers for a specific input (or form field)?
<input type="text" id="fullname" name="fullname" class="form-control" data-required="true" value="<?php echo $_POST['fullname']?>" >
When I open this form I see the value in this input even if I didn't insert any value.
I think adding autocomplete="off" would get you an error on most browsers, furthermore, autocomplete="off" is an invalid property.
Try to check the Mozilla Developer Documentation instead.
Just use the autocomplete attribute:
<input type="text" autocomplete="off"/>
"This would be useful when a text input is one-off and unique. Like a
CAPTCHA input, one-time use codes, or for when you have built your own
auto-suggest/auto-complete feature and need to turn off the browser
default."
Source : CSS Tricks
You could generate a random string using javasript or php and add it to the end of an input name, maybe even use a delimiter to split it apart from the actual name.
In php, you could use something like the session_id for this and simply echo it to the end of the name.
<input type="text" autocomplete="off" name="example<?php echo "," . session_id()?>">
You can replace the "," with any delimiter of your choice, so long as it isn't alphanumeric. Then when processing the data submitted, you can remove it from the end of the actual name of the input field.
With a field name always being different, your browser cant autocomplete it.
Source: https://stackoverflow.com/a/218453/12251360
Solution 1
<form name="form1" id="form1" method="post"
autocomplete="off" action="http://www.example.com/form.cgi">
This will work in Internet Explorer and Mozilla FireFox, the downside is that it is not XHTML standard.
Solution 2
The solution for Chrome is to add autocomplete="new-password" to the input type password.
Example:
<form name="myForm"" method="post">
<input name="user" type="text" />
<input name="pass" type="password" autocomplete="new-password" />
<input type="submit">
</form>
Chrome always autocomplete the data if it finds a box of type password, just enough to indicate for that box autocomplete = "new-password".
This works well for me.
Note: make sure with F12 that your changes take effect, many times browsers save the page in cache, this gave me a bad impression that it did not work, but the browser did not actually bring the changes.
Solution 3
<input type="text" id="fullname" name="fullname" autocomplete="off" class="form-control" data-required="true" value="<?php echo $_POST['fullname']?>" >
links
Solution 3 Reference : https://stackoverflow.com/a/25496311/6923146
Solution 2 Reference : https://stackoverflow.com/a/40791726/6923146

Categories

Resources