(Javascript) How can I show only 1 character inside textbox whatever I type?

Question

I just wanna use a simple HTML Textbox <input type="text" /> as a Password Box (<input type="password" />) do.
Showing the * or black circles for every single character i type inside.

"Password" box is offering user to remember the value. I just don't want it. I mean, what i'm using is not the kind of passwords inside. Just a normal input values but need to hide everything input from seeing from surrounding. So, don't want to be asked by browser to remember the values inside

Works for me: http://jsfiddle.net/nPAgv/ - I set a value as sample password. — Smamatti, Nov 11 '11 at 21:36
What's stopping you from using the password type? Any reason you can't use this instead of reinventing the wheel? — Surreal Dreams, Nov 11 '11 at 21:37
My understanding of the question: The OP wants to show the lastly entered character as an ordinary character, rather than a `*`. — Rob W, Nov 11 '11 at 21:39
I'm assuming that this is to emulate the Apple iOS password-entry? If so, then see: http://www.alistapart.com/articles/the-problem-with-passwords/ — David says reinstate Monica, Nov 11 '11 at 21:43
Coz "Password" box is offering user to remember the value. I just don't want it. I mean, what i using is not a kind of password inside. Just a normal input values but need to hide everything input from seeing from surrounding. So, don't want to be asked to remember the values inside. — 夏期劇場, Nov 11 '11 at 21:44
You want this? http://stackoverflow.com/questions/32369/disable-browser-save-password-functionality — pimvdb, Nov 11 '11 at 21:48
@4lvin Why are you trying to disable storing passwords? If the user wants to use the browser feature, why not let them? — Jonathan Lonowski, Nov 11 '11 at 21:49
@JonathanLonowski It is for the field "ITEM CODE" inside the Invoice Form. The "ITEM CODE" needs to be hidden. So, for inputting of continuous New Invoice Forms, the "ITEM CODE" field **should / must** not be remembered (or) the Code will be duplicated (or) the user will be annoyed. — 夏期劇場, Nov 11 '11 at 21:54

Leo · Answer 1 · 2011-11-11T23:44:10.177

1

You could manually catch the keyboard events and replace the characters by "*". You'll still have to save the original input somewhere if you want to use it later.

I made a jsfiddle here : http://jsfiddle.net/EPRp4/

Actually the code is pretty short so I'm gonna post it here :

$(document).ready(function(){
    var placeholder = "";

    $('input').keyup(function(){
        placeholder = $(this).val().replace(/./g,"*")
        $(this).val(placeholder);
    })    
})

edited Nov 11 '11 at 23:44

answered Nov 11 '11 at 23:29

Leo

4,563
2
16
27

1

Hi Leo, that is good for showing stars ... .but how about the original entry? I fiddled with it myself. Too short for an adequate answer (but the idea is valid). You will need to buffer the original entry in, let's say, origEntry and, for that, you will need an event listener (which is a few lines long). – zequinha-bsb Nov 11 '11 at 23:57

zequinha-bsb · Answer 2 · 2011-11-11T22:27:50.573

I believe everyone is missing the original point request: TEXTBOX as input type password.

4lvin, even though you haven't been able to express your real toughts in the answers to the comments left by the community, I believe you either want some magic or you want what you asked in the original request: TEXTBOX functionality of input type password.

You will have to intercept each and every keystroke by the user, store it on an "original" string and show a "same-size" stared (or asterisked) string on the textbox.

It is not impossible to do. Take a look at onKeyPress() and go from there. Good luck!

By the way, you could RE-INVENT the wheel and do the same for a regular input type text.

EDIT: okay, you just want to show A SINGLE STAR no matter what the user type (or a single -- last -- character). PROCEED as instructed (onKeyPress()) and build from there.

(Javascript) How can I show only 1 character inside textbox whatever I type?

2 Answers2