2 ways to disable chrome autocomplete on input fields

by Posted on

Google Chrome by default autocomplete the input field. The HTML autocomplete attribute no longer works on chrome. We present to you 2 methods you can use to disable the autocomplete feature for input fields in chrome and other browsers.

  1. Set input DOM value
  2. Use textarea (recommended)

Set input DOM value

When the page loads, wait for half second, then set the input value to empty.

<input type="text" name="username" id="disable-autocomplete" />

<script>
	window.addEventListener("load", function () {
		setTimeout(function () {
			document.getElementById("disable-autocomplete").value = ""
		}, 500)
	})
</script>

We are using wait for 0.5 seconds to let the chrome autocomplete set the value. Then we will override that value to empty.

Use textarea (recommended)

We can also use a textarea tag instead of the input field, which will look exactly like a standard input field.

<textarea name="username" rows="1"
	style="resize: none;
		min-height: fit-content;
		font-family: sans-serif;
		font-size: 14px;"

	oninput="this.value = this.value.replace(/\n/g, '')"></textarea>

resize: none; will remove the resize icon to the bottom right of textarea.

Some CSS frameworks like bootstrap give minimum height to a textarea field. You can override that value by setting min-height: fit-content; style.

To set the font the same for input fields, we are setting the font family to “sans-serif”, and size to “14px”. If you are using any framework like Bootstrap, you need to give the “inherit” property to “font-family”, “font-size”, and “font-weight”. This will take the font from its parent element.

rows=”1″ attribute is necessary as it will only make the textarea look like 1 row.

Finally, we are adding an attribute oninput that will be an event listener. This will be called whenever the element gets the user input. We are using a regular expression to convert all the new line characters to empty. This means we are disabling the enter key press. Otherwise, a new line would be started whenever the user presses enter key in the textarea.

That’s how you can disable autocomplete for input fields in Google Chrome. If you face any problem in following this, kindly do let me know.

Check out our tutorial to disable mouse scroll on input number fields.

Published by adnanafzal565