We want to disable autocomplete in Chrome browser in our React JavaScript application. We have tried a bunch of solutions available on the Internet but nothing worked. autoComplete=off is not reliable and so are other ways.
This is really important for us at this moment so can you please suggest us a foolproof way to disable autocomplete in Chrome using React JavaScript?
Secondly, we are using a common control/component for our text boxes and using them everywhere
Do autocomplete="new-password" to disable autocomplete. (For React, use autoComplete)
This is a hint, which browsers are not required to comply with. However modern browsers have stopped autofilling elements with autocomplete="new-password" for this very reason.
<input autocomplete="new-password"/> –
Pacifier You can override chrome autofill by add onFocus attribute.
render()
{
return <input type="text" name="name" value="this is my input" autoComplete="off" onFocus={this.onFocus} />
}
In the onFocus method we need to change "autocomplete" attribute through javaScript.
onFocus = event => {
if(event.target.autocomplete)
{
event.target.autocomplete = "whatever";
}
};
This solution works for me.
let me know if it works for you ;)
Nothing worked for me including new-password, so this is how I did:
onFocus={(event) => {
event.target.setAttribute('autocomplete', 'off');
console.log(event.target.autocomplete);
}}
I got the same issue with my React project. My solution is to use a random string for autoComplete attribute. Don't use "off", as per Pim, you need to set a invalid value to really turn auto completion off. Please also note the attribute name has to be autoComplete in React.
When using jsx - you have to camel case attributes; so autoComplete="new-password" instead of autocomplete.
For me changing just the autoComplete attribute to 'new-password' didn't work on its own because the name attribute of the field was set to 'password'. As soon as I changed that to something else it worked (in my case for example I used 'devicePassword')
<input type='password' name='devicePassword' autoComplete='new-password' />
Try not to set the type attribute, if you have a password and username, remove both of those input types and voila.. problem solved
I solved with
<form autoComplete="off">
<input
autoComplete="new-off"
/>
</form>
The only hack that worked for me is to create hidden input and add random number for the original input name:
<input type="text" name="" value="" readOnly={true} style={{display: "none"}}/>
<input
type="text"
name={"address " + Math.random()}
/>
The only workaround that worked for me:
onChange={({ target }) => {
if (target.autocomplete === 'off') {
setPassword(target.value);
}
}}
onFocus={({ target }) => {
target.setAttribute('autocomplete', 'off');
}}
The goal is just to define any attribute and check if the value is correct. I chose autocomplete just to make it obvious.
try setting autocomplete="new-password" to the <input type="password">,
It works.
The only thing that worked for me from the above solutions was to set the password type to text. This prevented the autocomplete on all my form input fields. I then used state and useEffect to dynamically set the type to password as soon as a value was entered for the password.
useEffect(() => {
if (!isPasswordVisible) {
if (password.length > 0) {
setIsPasswordVisible(true);
}
}
}, [password]);
And in the JSX,
<InputField
id={'signup-password-input'}
type={isPasswordVisible ? 'password' : 'text'}
value={password}
name='devicePassword'
autoComplete='new-password'
onChangeFunc={handlePasswordChange}>
Password
</InputField>
Obviously, I was using an InputField component in this case.
put this before your input element
<input name="abc" type="text" style={{display:'none'}}/>
so i integrate two hidden input field on top of my existing input to trick chrome and this is the only solution which work for me
<form>
{/* Hidden input fields to trick autofill */}
<input type="text" name="fake_user_name" autoComplete="username" style={{ display: 'none' }} />
<input type="password" name="fake_password" autoComplete="new-password" style={{ display: 'none' }} />
<div>
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
name="user_email"
value={email}
onChange={handleEmailChange}
autoComplete="email"
placeholder="Enter your email"
/>
</div>
<div>
<label htmlFor="phone">Phone:</label>
<input
type="tel"
id="phone"
name="user_phone"
value={phone}
onChange={handlePhoneChange}
autoComplete="tel"
placeholder="Enter your phone number"
/>
</div>
<button type="submit">Submit</button>
</form>
© 2022 - 2024 — McMap. All rights reserved.