CODEWITHSUNDEEP
javascriptreactjs
Neil
Neil

Reputation: 2058

Turn off autoComplete for all inputs in React app

This answer explains how to turn off autocomplete for an entire HTML document with jQuery.

Without jQuery is there a way to turn "off" React's equivalent autoComplete for all inputs within the app?

I'm not very familiar with jQuery otherwise I'd try to convert the function myself.

Upvotes: 7

Views: 16416

Answers (7)

alireza safafard
alireza safafard

Reputation: 11

autocomplete="off" didn't work well. I changed it to "new item" then it worked fine for me.

<input  placeholder="enter your name" value={this.input.myinput} autocomplete="new-item" />

Upvotes: 0

Yifan Lim
Yifan Lim

Reputation: 23

After spending few hours investigating all the solutions, I have found one using this CSS properties here:

-webkit-text-security: disc;

Change your text input filed type back to a normal text field so the browser won't suggest the autofill and use this css properties to make it act like a "Password Input field". It has 96% of browser supported and I think this will be the best approach so far

Upvotes: 0

user14532026
user14532026

Reputation:

To disable the autocomplete for input fields in React, we need to set the input field’s autoComplete attribute to "new-password".

<input type="email" name="email_signup" placeholder="Email" autoComplete="new-password" />
<input type="password" name="password_signup" placeholder="Password" autoComplete="new-password" />

This will turn off autocomplete for input.

Upvotes: 16

Nikhil
Nikhil

Reputation: 3950

use this in elements:

autoComplete:'off'

Upvotes: 3

mjones
mjones

Reputation: 61

The post that you are linking is just assigning the autocomplete off attribute to the document when it is loading. You can accomplish what jQuery is doing with something like the following using vanilla JS. However, I would suggest a more "React" way of doing things based on whatever logic you wish to accomplish.

var foo = document.querySelector("input"); 
foo.setAttribute("autoComplete", "off");

Upvotes: -1

hafridi
hafridi

Reputation: 278

You can use autocomplete="off" on the parent level of the form and that will turn it off for the entire form

<form method="post" action="/form" autocomplete="off">
[…]
</form>

Upvotes: 4

Alok Mali
Alok Mali

Reputation: 2881

You can do it with

<input name="myinput" placeholder="enter your name" value={this.input.myinput} autocomplete="off" />

Upvotes: -1

Related Questions