I have an input tag with password type on my website.

<input type="password">

With iPad or iPhone, it shows always the last letter when you are typing a password.

My problem is that I do a lot of demonstrations of my website with iPad.

I don't want that iPad shows the last letter when I'm typing my password.

Can I fix this by modifying something on my website?

I have an input tag with password type on my website.

<input type="password">

With iPad or iPhone, it shows always the last letter when you are typing a password.

My problem is that I do a lot of demonstrations of my website with iPad.

I don't want that iPad shows the last letter when I'm typing my password.

Can I fix this by modifying something on my website?

• javascript
• iphone
• html
• ios
• ipad

• Sure. Switch from an input type=password tag to a straight textbox, and write some javascript to record what's typed, but display *'s. You'll have to do some fancy work at post to swap the real values back in. Have fun! – asawyer Commented May 25, 2012 at 0:23
• 2 How about creating a user that you don't care about or have a demo app/DB? – Dave Newton Commented May 25, 2012 at 0:24
• Yes or change the password regularly? – Matthew Lock Commented May 25, 2012 at 1:05
• Or store the password and use autofill to populate the fields on log in. – Johan Kool Commented May 25, 2012 at 1:29

4 Answers 4

No, iOS shows the last letter of the password typed by default and there is no way to disable that.

For demonstration purposes, you have a few options that I can think of. If using a projector, or TV-out, disconnect the device or turn off the screen while entering the password or you can set up a "demo" account for whatever you are going to demo.

By setting up a "demo" account (and this is just a personal thought), you can continue without skipping a beat (pared to turning off a screen, etc.), and if the viewers of your presentation see a "demo" account login / password it shouldn't matter too much, right?

Also, this should go without saying, if using a demo account, make sure it has limited access, obviously!

The iOS password control lets you paste a password into it (even the iTunes store password popup dialog).

Why don't you use a password app such as pwSafe to store and then copy the password to the clipboard, or even precopy the password into the clipboard before the demo? That way you haven't got to reinvent the password control, or mess around with demo accounts.

The "simplest" thing is probably to create a custom input which listens for the keys and stores the actual key values while just displaying • or * in the field.

Just attach a key listener and display a * for each letter you enter, so you know that you're actually adding input.

Type into the field on the left, I'm displaying what I'm collecting in the field on the right while only showing asterisks where you type. It needs a bit of work to detect backspace and capitals and such, but you get the idea. example on fiddle: http://jsfiddle/d94P5/

Example

<input type="text" id="password">
<input type="text" id="hiddenValue">​

Javascript

var field = document.getElementById("password")
var realValue = "";
field.onkeydown = function(evt){
    realValue += String.fromCharCode(evt.keyCode)      
    this.value = realValue.replace(/./g,"*");      
    document.getElementById("hiddenValue").value = realValue

    return false;   
}

Maybe create a temporary password to a dummy account with strictly limited access, and configure your site to automatically disable that account and expire the password at the end of your demo hour.