Silver Boy Silver Boy - 1 month ago 18
HTML Question

Hide input text using jQuery

How can I make jQuery script that shows symbol (*) instead of a letter when typing text in input. Value of text input shouldn't change, only the visible text.

Input type password is not an option, because I would like to make that it could be possible to see original text again with a click of a button. Also, password input is autocompleted in Google Chrome and in this situation I don't want it to be autocompleted.

Answer

You should use a password field, set autocomplete="false" and toggle between text/password for the field

document.getElementById("fooVisible").addEventListener("change", function() {
    if (this.checked) {
  	return document.getElementById("foo").setAttribute("type", "text");
    }
    document.getElementById("foo").setAttribute("type", "password");
})
<input type="password" id="foo" autocomplete="false" />
Show: <input type="checkbox" id="fooVisible" />