I am having an issue while using the autocomplete="current-password" where the form is not showing the current password. The password is saved in Chrome. The input is wrapped in a form. Is anyone having issues with autocomplete="current-password" not working for them?
here is my input for React:
<input
type={this.state.visible ? `text` : `password`}
onChange={(e) => this.props.onChange('password', e.target.value)}
autoComplete="current-password"
placeholder="password"
/>
I have not seen any reference to this not working or anyone mentioning this not working.
note: autoComplete must be spelled this way in React as react does not recognize the attribute as autocomplete but renders on the DOM as autocomplete
here is how the element is rendering on the DOM:
<form class="sign-in">
<div class="input-group">
<label>Email</label>
<input type="email" placeholder="achroma#gmail.com" autocomplete="username" name="email" value="">
</div>
<div class="input-group">
<div class="password-top">
<label>Password</label>
<span class="password-toggle">show password</span>
</div>
<input type="password" autocomplete="current-password" placeholder="password">
<span class="forgot-password">Forgot Password?</span>
</div>
</form>
Your resulting HTML lacks name="password" at least.
Also, currently Chrome doesn't suggest password auto-fill for localhost. I had to turn back on auto-sign-in in Chrome settings, since my Chrome didn't suggest password auto-fills on any sites. Hope it helps.
I've tested your code in a clean react project, just added name="password" to the password input, and used a proxy to my machine. It seems to work in Chrome.
Related
In html code i have try to use this:
<input type="password" name="password" autocomplete="new-password">
<input type="password" name="password" autocomplete="new">
<input type="password" name="password" autocomplete="off">
<input type="password" name="password" autocomplete="nope">
Update test diferent name tag:
<input type="password" name="p1" autocomplete="nope">
<input type="password" name="p2" autocomplete="nope">
<input type="password" name="ahgsfkhas" autocomplete="nope">
To prevent chrome to show suggestion picker List, but none of this work, this is the result:
some way to disable this through an HTML or JQuery / javascript tag, I don't have access to all Chrome installations on PCs, like to edit this feature
this is not an offer to save password; this is a select picker from password stored (Password Manager). this breaks into the Interface of a Web Page, and I see no way to deactivate it from the web page, since I don't have access to the browser settings.
I had the same problem it seems difficult to solve I found a solution
To solve the problem the input in initialization must be equal to type="text" and then change to type="password" with the first focus or insert input
function changeTypeInput(inputElement){
inputElement.type="password"
}
<input type="text"
id="anyUniqueId"
onfocus="changeTypeInput(this)"
oninput="changeTypeInput(this)"
/>
it's relative to the browser
settings => automatic entry => password => Offer to save passwords (no)
I have noticed on some websites google is asking me if i want to use a password generated by Chrome.
It doesnt happen with my own input field.
How can i make this work?
EXAMPLE
Based on chromium; this should work : (the suggest password comes after already known passwords for that site)
<form id="login" action="signup.php" method="post">
<input type="text" autocomplete="username">
<input type="password" autocomplete="new-password">
<input type="password" autocomplete="new-password">
<input type="submit" value="Sign Up!">
</form>
more examples : https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands
I'm trying to disable the browser autocomplete on my Login form only after the user is being redirected from the reset password page.
I read many answers in SO but couldn't find something that worked for me.
I tried to set autocomplete="off" on the form tag, on each input but it didn't work.
I tried adding hidden fields as many suggested but it only works if I set on the fake password field the same name of the real password field - what of course I can't do.
That's the only way I got it to work:
<form id="login-form" method="post" action="/account/login">
<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password" id="password_fake" value="" style="display:none;" />
<!-- ------- -->
<div class="inputField resetPasswordLogin login">
<input type="email" id="email" name="email" placeholder="USERNAME"/>
</div>
<div class="inputField resetPasswordLogin login">
<input type="password" id="password" name="password" placeholder="PASSWORD"/>
<input type="submit" class="hiddenSubmit" id="hiddenLogin"/>
</div>
</form>
It seems like this workaround works without having to set the same name in the password filed, any idea what can causes such a behavior?
This is what finally worked for me:
<div style="height:0px; overflow:hidden; ">
Username <input type="text" name="fake_username" >
Password <input type="password" name="fake_password">
</div>
I am building a Bootstrap form and the email and password form elements show with pre-populated data from some other or some earlier form login on a different site. The Chrome browser is auto-populating the form elements.
Is there an HTML attribute of method in Bootstrap to force these form elements to null or empty on page load?
2015-10-29 -- here's the markup:
<form autocomplete="off" method="post" role="form">
<div class="form-group">
<input name="formSubmitted" type="hidden" value="1">
</div>
<div class="form-group">
<label for="username">Username</label>
<input autocomplete="off" autofocus="autofocus" class="form-control" id="username" name="username" required type="text">
</div>
<div class="form-group">
<label for="password">Password</label>
<input autocomplete="off" class="form-control" id="password" name="password" required type="password">
</div>
<button class="btn btn-default" type="submit">Login</button>
</form>
Use autocomplete="new-password"
Works a charm!
Use the autocomplete="off" attribute on the <form> or <input>.
from MDN:
autocomplete
This attribute indicates whether the value of the control can be
automatically completed by the browser.
off The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method;
the browser does not automatically complete the entry.
on The browser is allowed to automatically complete the value based on values that the user has entered during previous uses...
Also from MDN, see: How to Turn Off Form Autocompletion
Also see:
Chrome Browser Ignoring AutoComplete=Off
"AutoComplete=Off" not working on Google Chrome Browser
autocomplete ='off' is not working when the input type is password and make the input field above it to enable autocomplete
I have a very standard Rails 4 Application using Devise 3
I want to have the registration form to trigger password suggestions in the current (Mavericks) version of Safari:
iCloud Keychain is enabled and I get suggestions on other pages, just my form does not work with that for some reason.
I can't seem to figure out what exactly it takes to enable suggestions.
Here is the form that devise generates:
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="SKtqmi1L/BKcTE/Hvlvw1H3ZRH8nd2UNiNnVILuLS/E=" />
</div>
<div>
<label for="user_email">Email</label><br />
<input autofocus="autofocus" id="user_email" name="user[email]" type="email" value="" />
</div>
<div>
<label for="user_password">Password</label><br />
<input id="user_password" name="user[password]" type="password" />
</div>
<div>
<label for="user_password_confirmation">Password confirmation</label><br />
<input id="user_password_confirmation" name="user[password_confirmation]" type="password" />
</div>
<div><input name="commit" type="submit" value="Sign up" /></div>
</form>
How do I need to change the form to trigger password suggestions
are there any usable documentation anywhere about that feature?
Apple accepts new autocomplete properties: current-password and new-password
I had the same issue with my site which is dedicated to password generation test cases to improve password generators.
As outlined in a [PDF] guide made by Apple the autocomplete property now accepts set values to help with this issue.
See the spec here along with other valid values: https://html.spec.whatwg.org/multipage/forms.html#attr-fe-autocomplete-new-password
<form method="post" action="/tests/4/register-submit" >
<label>
<div>Name</div>
<input
name="name"
placeholder="name"
autocomplete="name"
type="text"
pattern=".{4,}"
title="Needs to be 4 characters long."
required
/>
</label>
<label>
<div>Username</div>
<input
name="username"
placeholder="Username"
type="text"
autocomplete="username"
pattern=".{4,}"
title="Needs to be 4 characters long."
required
/>
</label>
<label>
<div>Password</div>
<input
name="password"
placeholder="Password"
type="password"
autocomplete="new-password"
required
/>
</label>
<input type="submit" value="Register" />
</form>
That code works due to the autocomplete="new-password" property used. autocomplete="current-password" is also possible for login forms.
This has been tested as working by the very helpful: #simevidas
I've tested your code, and it successfully suggested a password. So you have a problem other than your HTML.
Ensure the following are true:
Your server is properly outputting your web page as HTML content, with response code 200. (You can see this using any browser's developer tools.)
You're on the latest version of Safari (7.+)
AutoFill usernames and passwords is checked in Safari > Preferences > Passwords.
Try removing all saved passwords for your domain in Safari.
You have Keychain checked On in iCloud (System Preferences > iCloud)
Maybe adding an autocomplete="on" attribute to the form or input-tag works.
http://www.w3schools.com/HTML/html5_form_attributes.asp