I was given a fascinating challenge to produce a simple HTML, JavaScript interface that would react and respond in the same way that the iPhone password text box reacts. That is, when you punch a key you temporarily see the value of the entered text, after some short display the text is replaced by an asterix. So this is what I came up with for the basic html, the solution relies on a hidden field that actually stores the value of the password field while the actual text box :


The most obvious weakness here is that deleting the text removes the entire line, this was necessary as we cannot actually tell which characters is being deleted within the context of text box in a web browser. Please feel free to point me to better solutions in the comments I was hoping someone solved this problem properly in HTML5 and jQuery.

Comment Section

Comments are closed.