I am building a little registration page that is going to be accessed via an iPad at a sales office as a kiosk. When I first received the page from the web design company I noticed that the way they set it up was the labels of the input fields appear inside the field (like a watermark). The watermark is cleared out once you focus on the field and then restored if there is no value when you blur off the field.
I noticed that they had a couple password fields in the page that was showing the words PASSWORD and RETYPE PASSWORD in them. I don't want people's password exposed in the Sales Office, however changing the fields to type password means that the watermark labels become masked.
Since they were using jQuery to do the watermark in the input fields, I found another jQuery solution that would swap out the TEXT input field for a PASSWORD input field on focus. When I tested it on my PC in Safari it worked like a charm. However when I was testing the page with my iPhone I noticed that the jQuery field swap on focus only works if I click on the field with my finger. If I am using the on screen keyboard and clicking NEXT to get the field, then the field doesn't get swapped and the on screen keyboard goes away. I have to physically click the field to get the swap to fire. Is there some other even that I can use to trigger the swap instead of focus?
$('#txtRetypePassword-clear').focus(function() {
$('#txtRetypePassword-clear').hide();
$('#txtRetypePassword-password').show();
$('#txtRetypePassword-password').focus();
});