Hide input text using jQuery

Question

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.

Just set the default type of your input field to `password`, and have your button toggle your input type between `password` and `text`. Add an `autocomplete` attribute to your field, and set it to `false`. — ifvictr, Nov 06 '16 at 17:26
I posted question earlier about autocompleting and it turned out that no matter what you do, some versions of Chrome still won't turn autocompleting off. But thanks for password and text type swapping idea. — Silver Boy, Nov 06 '16 at 17:40
This is a feature of Chrome, unfortunately. A question was posted awhile back here: https://stackoverflow.com/questions/12374442/chrome-browser-ignoring-autocomplete-off — ifvictr, Nov 06 '16 at 17:42

score 1 · Accepted Answer · answered Nov 06 '16 at 17:30

1

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

answered Nov 06 '16 at 17:30

baao

62,535
14
113
168

I've tried to turn autocompleting off. It doesn't work, but jQuery code works perfectly. Thanks. – Silver Boy Nov 06 '16 at 17:37
I think the code could be better. Using the ternary operator would make this even better: `document.getElementById("foo").setAttribute("type", this.checked ? "text" : "password");` – ifvictr Nov 06 '16 at 17:45
1

@Silver Boy There is no jQuery here. It's all javascript. – TheValyreanGroup Nov 06 '16 at 18:00

score 1 · Answer 2 · answered Nov 06 '16 at 17:59

1

You could store the value in a variable and replace all characters with the asterisk. This does not handle delete or backspace, but this should get you in the right direction if that's the way you want to go.

$(document).ready(function(){
  var textValue = "";
  $('.asteriskInput').keypress(function(e){
    var textLength = $(this).length;
    textValue += e.key;
    $(this).val($(this).val().replace(/[A-Za-z]/g,'*'));
    
  });
  $('#changeInputView').on('click',function(){
    $('.asteriskInput').val(textValue);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="asteriskInput" type="text" /><br />
<button id="changeInputView">Show characters</button>

answered Nov 06 '16 at 17:59

TheValyreanGroup

3,407
2
10
30

This is a very complicated solution to a very small problem... He just wants the text hidden, not literally be replaced with asterisks. – ifvictr Nov 06 '16 at 19:11
Yea, but his requirement was not using the password type input. Making replacing it the only way. – TheValyreanGroup Nov 06 '16 at 19:12
He only didn't want to use type `password` because he wanted to be able to reveal the actual characters typed on the click of a button. He didn't know you could toggle between `text` and `password`. Question author has accepted an answer which accomplishes just that, and has taken my comment on it. – ifvictr Nov 06 '16 at 19:16

Hide input text using jQuery

2 Answers2