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.
- Set input DOM value
- Use textarea (recommended)
1. 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.
2. 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.
Textarea as password
If you want to have your <textarea> tag to be treated as password input field, you can do it the following way:
<textarea name="password" rows="1"
style="resize: none;
min-height: fit-content;
font-family: sans-serif;
font-size: 14px;"
id="maskedPassword"></textarea>
<input type="hidden" id="hiddenPassword" />
Then in Javascript, you need to do the following:
const maskedPassword = document.getElementById('maskedPassword')
const hiddenPassword = document.getElementById('hiddenPassword')
maskedPassword.addEventListener('input', function (event) {
const input = event.target.value
// Prevent adding asterisks to the hidden input value
if (input.length > hiddenPassword.value.length) {
const newChar = input[input.length - 1]
hiddenPassword.value += newChar
} else {
hiddenPassword.value = hiddenPassword.value.slice(0, input.length)
}
maskedPassword.value = '*'.repeat(input.length)
})
Explanation:
- <textarea>: First we create a <textarea> tag where user will enter his password. Whatever user enters here will be replaced with asterisk “*”.
- <input />: Then created a hidden input field where the actual password value will be stored.
- In Javascript, we get DOM of both <textarea> and hidden <input> field.
- Attach an input event listener to the <textarea> that will be called whenever user type anything in it. This will also be called if user copy/paste something in it.
- Line 5: Getting the value of <textarea>.
- Line 8: Make sure the length of <textarea> should be 1 character greater than the hidden <input> field.
- Line [9-10]: Get the last character of textarea and append it in hidden input field.
- Line 12: If textarea value is less than hidden input field, meaning user has pressed backspace or remove some characters, then replace the hidden input field value to where it was before (last entered value).
- Line 15: Replace every character in textarea with asterisk “*”.
Disable copy, cut and paste
As this is a password field, so you must not allow users to copy, cut or paste from that input field. You can disable copy, cut and paste features on password field.
// Disable copying, cutting, and pasting
maskedPassword.addEventListener("copy", function (event) {
event.preventDefault()
// alert("Copy is disabled!")
})
maskedPassword.addEventListener("cut", function (event) {
event.preventDefault()
// alert("Cut is disabled!")
})
maskedPassword.addEventListener("paste", function (event) {
event.preventDefault()
// alert("Paste is disabled!")
})
That’s how you can disable autocomplete for input fields in Google Chrome along with disabling copy, cut and paste feature.
Disable autocomplete on textarea
If you are using <textarea>, you will notice that it also has an autocomplete feature. To disable the autocomplete feature on textarea, you need to do 2 things:
- Set readonly attribtue as soon as textarea gets focused.
- Remove readonly attribute just after 10 milliseconds.
<textarea name="address" id="address"></textarea>
<script>
document.getElementById("address").addEventListener("focus", function() {
const self = this;
this.setAttribute("readonly", true);
setTimeout(function () {
self.removeAttribute("readonly");
}, 10);
});
</script>
If you set readonly attribute on textarea tag, the autocomplete feature does not work. But that means that user is also not able to type anything in textarea field. So you remove the readonly attribute right after 10 milliseconds that will not be noticeable by users.
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.
