jQuery: поле пароля с читаемой меткой?

Question

Я написал эту очень простую функцию для моего текущего проекта под названием insidelabel (), которая позволяет мне добавить описание (метку) для поля ввода внутри ввода.текст исчезает, и когда он размывается, он снова имеет тот же текст.

<form method="get" action="">
    <input type="text" class="t" value="" /><br/>
    <input type="password" class="p" value="" />
</form>

Однако теперь мне интересно, как я мог бы расширить эту функцию, чтобы иметь метку и внутри полей пароля!Звучит странно ... Объяснение: Я хочу, чтобы в поле пароля (с type="password") имелась читаемая метка (например, "введите пароль").Когда пользователь вводит текст, пароль должен быть нечитаемым (пунктир).Действительно плохое объяснение, я знаю, но я думаю, вы могли бы понять, что я имею в виду.

Интересно, как лучше это сделать?Должен ли я запросить, является ли поле ввода type="password", и если да, я установил его на type="text" - после ввода текста я снова установил его на type="password".Любая идея, что является лучшим решением для этого?

Вот мой пример: http://jsfiddle.net/R8Zxu/

Answer 1

Если вы используете реальное <label>, расположенное под (прозрачным) <input> вместо фальсификации его с атрибутом значения (что имеет некоторые важные последствия для доступности), то вы можете сделать что-то вроде: http://dorward.me.uk/tmp/label-work/example.html

Не пытайтесь изменить тип существующего ввода.Internet Explorer не позволит вам.

Answer 2

ОК для веб-приложений, но если вы хотите использовать страницу в приложении iPhone, она не работает должным образом, для правильного ответа см. Это - http://blog.stannard.net.au/2011/01/07/creating-a-form-with-labels-inside-text-fields-using-jquery/

Answer 3

Да, это был бы правильный подход. Это известно как «водяной знак» в текстовом поле, и поскольку поля ввода пароля используют другой механизм отображения текста, когда водяной знак активен, вы можете захотеть переключить его на тип текста. На Фокусе вы бы переключили его (и при необходимости) на новое текстовое поле.

Просто помните, что вам нужно выполнить преобразование в type = "text", прежде чем связываться со значением; Есть ограничения, когда это тип = "пароль".