I want my form to get Instagram into a field autocomplete on my own form. So, they complete my form and the Instagram field is filled automatically. But I can see precious little on forums or net about it.
Here's the field they use for login name:
<input aria-label="Phone number, username, or email" aria-required="true" autocapitalize="off" autocorrect="off" maxlength="75" name="username" type="text" class="_2hvTZ pexuQ zyHYP" value="stevie.brockard">
Specifically Chrome is most important but a cross-browser solution would be best, of course.
Related
How To Preventing Browser Text Input Suggestions from browser cookie, autocomplete="off" and others are not work.. Chrome Version : 2021 chrome version 88.0.4324.190
readonly is work for autofill its work proper, but autosuggestion is not.
<input type="email" class="form-control" id="email" name="email" placeholder="Enter Email" readonly onfocus="this.removeAttribute('readonly');" style="background-color: white;" autocomplete="off">
<input type="password" class="form-control" id="Password" name="password" minlength="6" placeholder="Enter Password">
what you want is here
change type="password" to type="text" and used in your input
-webkit-text-security: disc !important;
<input type="text" class="form-control" id="Password" name="password" minlength="6" placeholder="Enter Password" style="-webkit-text-security: disc !important;">
The only thing that still works in Chrome is creating random name not related to the field. Like autocomplete="new-password" to password field name.
Seems to be wrong, but it's a workaround.
So for your field named email, try to put autocomplete="new-email".
Even as stated as working in the SO below, autocomplete="off" still buggy:
Disabling Chrome Autofill
Also note that autocomplete="no" will appear to work but autocomplete="off" will not for historical reasons. autocomplete="no" is you telling the browser that this field should be auto completed as a field called "no". If you generate unique random autocomplete names you disable auto complete.
You need to keep in mind that's a feature from the Password Manager.
This is correctly stated here by Mozilla:
Preventing autofilling with autocomplete="new-password"
And why it's not always possible to prevent:
Browser compatibility
Note: In most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See the autocomplete attribute and login fields.
Solution #1:
As you can see, the autosuggestion show From this website.
As workaround, you need to change the fieldname from name="email" to something else, like name="user-email".
And handle the change inside your server logic.
Again in your server logic, generate a random name every time page is shown, like a UUID autocomplete="c821c4f0-7be8-11eb-9439-0242ac130002"
Solution #2:
Replace the input kind type="email" to type="text".
html:
<input type="text" class="form-control" id="user-email" name="user-email" placeholder="Enter Email" readonly onfocus="this.removeAttribute('readonly');" autocomplete="off" />
javascript:
window.onload = function () {
init();
}
function init() {
let x = document.getElementById("user-email");
if (x) x.setAttribute("type", "email");
}
Solution #3:
Add hidden fields before the real one:
HTML - Disable Password Manager
PS: Don't forget to place autocomplete="off" on the form which field belongs
I have a few input fields on my website. There are few passwords saved for that website(Chrome Login Saved passwords). But the problem i am facing is that the email is appearing on the input field which is not for email i.e somewhere else on that same website. This is the input field code where i don't want chrome to autofill/autocomplete as it is not required here. I have tried autocomplete =off/false/new-password nothing worked.
<input type="text" ng-model="week_sco_topic" placeholder="Week SCO Topics" autocomplete="off">
When you click on the field above it shows the saved passwords for that website which is not required on this field.
I found the solution. The browser ignores autocomplete="off" unless it is in a form. Therefore, the code below removed the autofill suggestions.
<form autocomplete="off"><input type="text" ng-model="week_sco_topic" placeholder="Week SCO Topics"></form>
Google chrome ignores autocomplete="off" so you can try to make another input field above it to fool the browser
<input type="text" style="visibilty:hidden">
<input type="text" ng-model="week_sco_topic" placeholder="Week SCO Topics" autocomplete="off">
you can also read this answer
I have a very basic form where I ask user's name, mobile, email. I have enabled autocomplete provision in these fields using the following code:
<label for="frmNameA">Name</label>
<input name="name" id="frmNameA" placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA" placeholder="+1-650-450-1212" required autocomplete="tel">
Here is the fiddle. Currently, the user has to focus on these elements and then it displays the suggestions. Is there any way by which we can prefill this data once the form is loaded? We want to prefill the 1st suggestion that comes in the autocomplete and not some hard coded value.
Also, I saw websites like facebook, twitter etc. using only autocomplete and not prefilling the data - is there any specific reason to not prefill the things?
The autocomplete attribute specifies whether a form should have autocomplete on or off.
When autocomplete is on, the browser automatically complete values based on values that the user has entered before.
<form action="/action_page.php" method="get" autocomplete="on">
First name:<input type="text" name="fname"><br>
E-mail: <input type="email" name="email"><br>
<input type="submit">
</form>
You can store user values into the localStorage at completion, then load this values on page load.
This way, no need to hardcode datas, neither store server side.
// Store
localStorage.setItem("userconfig",mail.value)
// Fill data
onload = (function(){
mail.value = localStorage.getItem("userconfig")
})
This has been bothering me for a few weeks now.
I have a login form that used to require username + password:
<form role="form" method="post" action="/login" class="form-signin">
<div class="form-group">
<label for="username">Username</label>
<input id="username" name="username" type="text" placeholder="ex: AD\jdoe" required="required" autofocus="autofocus" class="form-control"/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input id="password" name="password" type="password" required="required" class="form-control"/>
</div>
</form>
I changed it to use the user's email instead due to reasons:
<form id="form" role="form" method="post" action="/login" class="form-signin">
<div class="form-group">
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="ex: name#website.com" required="required" autofocus="autofocus" autocomplete="email" class="form-control required"/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input id="password" name="password" type="password" required="required" class="form-control"/>
</div>
</form>
Much to my surprise, Chrome was still auto-filling out the email field with the previously saved credentials. I tried a variety of permutations on the email field's attributes to no avail (also tried renaming the password field as well just in case, and that too still gets auto-filled). Firefox has the same behavior as well.
I also tried renaming the form itself, and adding a second form just to test wherein the browser filled in both sets of inputs.
Finally, exasperated, I came up with this workaround:
<form id="form" role="form" method="post" action="/login" class="form-signin">
<div class="form-group">
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="ex: name#website.com" required="required" autofocus="autofocus" autocomplete="email" class="form-control required"/>
<!-- Workaround for inability to clear the autocomplete functionality of a previously named field-->
<input id="username" type="text" name="username" class="hidden"/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input id="password" name="password" type="password" required="required" class="form-control"/>
</div>
</form>
The downside is that it won't save the user's email if they have previously saved credentials, and it continues to auto-fill the password (and the username too).
Of course, I can add some error to trigger to validate the field is an email and whatnot, but I'm more curious as to why this behavior is happening. It seems that short of removing the saved credentials in my own browser, I have no way to reset the auto-complete data for my users to prevent it from erroneously filling in the username into the email field.
What's kind of funny as well, since I set the new input to be of type email, it triggers the validation of the field and throws the browser's validation error saying the username is not a valid email (as expected).
I referenced this Stack Overflow question, which says:
It does not care what the field is called - just assumes the field before password is going to be your username.
This was what I was guessing to be the problem. Because your field is named password, it assumes that whatever comes before it is also related to login credentials (which is 100% time how it goes).
If you never want autocomplete on your login, that's the easier solution: simply disable autocomplete on the fields by using autocomplete="off" as an attribute on the fields. However, if you want to have the fields use autocomplete, just not the old data, that will prove to be a bit more difficult, and I don't know the full solution to this. The above article only makes mention of fully disabling autocomplete.
What might fix this (allowing autocomplete but not the old data) would be to use different input field names. Granted, I haven't tested this, but if you call your password field password2 and your username field username2 or something similar, and do not have a password input field, Chrome might detect it as being a different set of fields, and make its own, new association. Again though, I can't promise that this will work for you.
Not really a "fix" per se since it doesn't really handle it transparently as I was hoping, but, I opted to simply remove the workaround field and let my users deal with having their browser through a validation error when submitting the form.
Since the new field has type="email", when they try to submit the form it will validate the previously saved username as an invalid email and tell the user of such. The user will then change it to their email and hit submit again, at which point the browser will prompt them with the save login credentials message and all will be happy hence forth.
Not as clean as I'd have liked it, but it works and it'll be a one-time thing for users who had previously saved their username.
Now that Mavericks is out, and it can use autofill to handle credit card info, are there specific field names they look for?
Well I'm not sure exactly about how Mavericks handles it but in chrome you can accomplish autofill in a way like this:
<form method="post" autocomplete="on">
<input name="cc-name" autocomplete="cc-name" type="text" placeholder="Full Name" required />
<input name="cc-number" autocomplete="cc-number" type="text" placeholder="Credit Card Number" required />
<input name="cc-exp" autocomplete="cc-exp" type="text" placeholder="Expire Date" required />
<input type="submit" name="submit" value="Send my personal info to this person.." />
</form>
If safari works how chrome does it might have a regex scanner that looks for familiar terms and fills it in to the best of it's ability. It's very difficult to find any full details on how properly write an autocomplete form. The best bet is try it out and see what works then update your post with your results.
From my research it seems that for an autocomplete form to be filled with credit card info the web page MUST be under a secure domain ( https:// )
This is a list of all the autofill values that might work http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofill-field
Good luck! and don't abuse it.. That being said, not too many people will actually have their credit card set up for autofill for security reasons. I personally wouldn't for the risk of someone abusing the autofill feature and stealing my information with malicious JavaScript.