Preventing Browser Text Input Suggestions

Preventing Browser Text Input Suggestions

Gecko-based browsers support a tag attribute called "autocomplete". So in your <form> tag you would put <form autocomplete="off">.

More here: How to turn off form autocompletion

Some other browsers have support for this as well. I believe IE will honor this.

How to turn off html input form field suggestions?

What you want is to disable HTML autocomplete Attribute.

Setting autocomplete="off" here has two effects:

It stops the browser from saving field data for later autocompletion
on similar forms though heuristics that vary by browser. It stops the
browser from caching form data in session history. When form data is
cached in session history, the information filled in by the user will
be visible after the user has submitted the form and clicked on the
Back button to go back to the original form page.

Read more on MDN Network

Here's an example how to do it.

<form action="#" autocomplete="on">  First name:<input type="text" name="fname"><br>   Last name: <input type="text" name="lname"><br>   E-mail: <input type="email" name="email" autocomplete="off"><br>  <input type="submit"></form>

Preventing Browser Text Input Suggestions 2021 chrome version 88.0.4324.190

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;">

How do you turn off browser suggestions on html input

Just use autocomplete on your inputs:

autocomplete="off"

Something like:

<input type="text" autocomplete="off">

You can always switch back to autocomplete="on" when required.

How do you disable browser autocomplete on web form field / input tags?

Firefox 30 ignores autocomplete="off" for passwords, opting to prompt the user instead whether the password should be stored on the client. Note the following commentary from May 5, 2014:

• The password manager always prompts if it wants to save a password. Passwords are not saved without permission from the user.
• We are the third browser to implement this change, after IE and Chrome.

According to the Mozilla Developer Network documentation, the Boolean form element attribute autocomplete prevents form data from being cached in older browsers.

<input type="text" name="foo" autocomplete="off" />

How do you disable browser autocomplete on web form field / input tags?

Firefox 30 ignores autocomplete="off" for passwords, opting to prompt the user instead whether the password should be stored on the client. Note the following commentary from May 5, 2014:

• The password manager always prompts if it wants to save a password. Passwords are not saved without permission from the user.
• We are the third browser to implement this change, after IE and Chrome.

According to the Mozilla Developer Network documentation, the Boolean form element attribute autocomplete prevents form data from being cached in older browsers.

<input type="text" name="foo" autocomplete="off" />

How to turn off input autocomplete?

After long testing I've found a solution to this.

But first i am going to list the different parial solutions, if anyone needs a specific one

Things i tried

1.Make browser autofill only one input at a time

Setting an attribute autocomplete="off" to the form and autocomplete="none" to all the inputs resulted in autofill only suggesting and autocompleting a single field, instead of the whole form. This feature was tested on chrome and on firefox. I did not test it on safari, because it did not produce the result I wanted.

2. Adding hidden inputs

Some people have said, that if you put hidden fields with display: none as style and add the names : name="firstName" etc. It will autocomplete those, and not your main fields. However this has not worked for me.

3. Changing the type of the input to 'Search'

Changing the attr type="search" of the input element worked in chrome and firefox. It added a little x at the end of the input, so you can 'clean' your search. autoComplete="off" must be added to every field. This did not work on safari.

4. Adding different values to autoComplete

the autoComplete attribute expects a string to be passed, that means it can be "off","none","nope","new_input_64" . It worked some of the time on chorme, so I did not bother testing it on safari. edit: it does not work.

5. Changing label names to some gibberish

Some people have posted as answers, that safari also reads the label names, so I changed those as well, but to no avail

MY Solution:

After banging my head the whole day, an idea came. What if I change all the inputs to text areas... So i did.
First i changed the inputs to textareas and added a rows={1} so it has only one row. Then i added the following styling

 textarea {
  resize: none;
  overflow-x: scroll;
  white-space: nowrap;
}

.no-scroll::-webkit-scrollbar,
.no-scroll::-webkit-scrollbar-track-piece {
  width: 0px;
}
.no-scroll::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 0px;
}

.no-scroll::-webkit-scrollbar-thumb {
  border-radius: 0px;
  border: 0px solid transparent;
  background-clip: content-box;
  background-color: transparent;
  width: 0px;
}

And to make so that the user cant use return to add new lines, i added this to the top of my component.

 useEffect(() => {
    var textArea = document.getElementsByTagName('textarea')[0] //your desired TextArea
    textArea.onkeydown = function (e) {
      if (e.keyCode == 13) {
        e.preventDefault()
      }
    }
  }, [])

And now, finally, safari does not autocomplete my fields.

Important Note*

I used normal inputs (without react-hook-forms) and adding only autoComplete="off" to the fields worked. But since i added react-hook-forms to manage state properly and have the error functionallity, the solution no longer worked. So hey, if you have as specific case as mine, please share if that worked out for you in the comments.

---

Related Topics