Поле за парола стил iPhone

Как е при iPhone/iPod

• Полето за парола при iPhone/iPod превръща текста в точки, но позволява за известно време (няколко секунди) последната буква да е видима;
• При натискане на буква или число се показва малко прозорче, което показва коя буква е избрана;

Показване коя буква/число е избрано

html:

[html]
<form id="form1" action="#">
<div><label for="password">Парола</label>
<input id="password" name="password" type="password" />
</div>
</form>
[/html]

css:

[css]#form1 div {
position: relative;
}
#form1 div #letterViewer {
display: none;
position: absolute;
left: 240px;
top: -30px;
width: 100px;
font: bold 72px Helvetica, Sans-Serif;
}[/css]

jQuery:

[js]$(function() {
$("#form1 div").append("<div id="letterViewer">");
$("#password").keypress(function(e) {
$("#letterViewer")
.html(String.fromCharCode(e.which))
.fadeIn(200, function() {
$(this).fadeOut(200);
});
});
});
[/js]

Показване на последната буква

Показване на последната буква за няколко секунди се оказа, че не толкова лесно. За наше щастие има готов jQuery plugin, който ще използваме. Също така трябва да добавим и следният ред към документа ни:

[js]$(‘#user-password-2′).dPassword();[/js]

Демо Изтегли

Източник: css-tricks.com