HTML текстовое поле, чтобы вести себя как поле пароля

Question

У меня есть форма регистрации, и я хочу использовать поле пароля. Проблема в том, что я хочу, чтобы в начале был заполнитель, говорящий «Пароль», поэтому вместо этого я использую текстовое поле. Мне нужно превратить символы в звездочки или черные кружки, такие как поле пароля, когда пользователь начинает печатать.
Я попытался изменить атрибут "type" на "password" через javascript, поэтому я застрял.
Есть ли простой способ решить эту проблему с помощью CSS? или кто-нибудь знает хороший javascript (желательно jquery) для взлома этого?
Спасибо

Answer 1

1. Использовать обычное поле пароля
2. Не используйте value как заполнитель - он становится невидимым, среди прочего, для пользователей программ чтения с экрана.
3. Поместите этикетку в <label>
4. Поместите метку за входом
5. Восстановите ввод с помощью JS, чтобы изменить фон

Демо на http://dorward.me.uk/tmp/label-work/example.html

Answer 2

Вы можете использовать атрибут HTML5 placeholder Однако это не будет работать во всех браузерах (особенно в старых).

<input type="password" name="pwd" placeholder="Enter Password" />

Answer 3

Наведите указатель div или span на текстовое поле (пароль), а затем скройте его, когда поле ввода пароля окажется в фокусе или нажмет div / span.

Answer 4

У меня была похожая проблема, когда у меня в качестве меток было Значение входных данных, и когда вы щелкали внутри одного из них, запускался какой-то Javascript, очищая входные данные.Но в поле пароля вам нужно было изменить тип ввода с «текст» на «пароль», который работает в браузерах, таких как Safari или Firefox, но не в IE (IE не очень хорошо поддерживает функцию setAttribute).Поэтому я убивал себя, пытаясь понять, как лучше всего это сделать (условные выражения IE и т. Д.)

Я нашел эту ветку, и я думаю, что Квентину пришла лучшая идея.Не только потому, что он работает и должен работать во всех браузерах, но также обеспечивает фактическую метку в коде, что, за исключением Screenreaders, является хорошей практикой.Кроме того, вы всегда должны учитывать тех, кто использует программы чтения с экрана в некоторой степени.

Вот основы решения: HTML:

<label>Enter Password
<input type="password" name="password" class="input" /></label>

JQuery (примечание: я не jQueryэксперт. Вероятно, это можно было бы написать лучше или эффективнее, но для двух полей это работает):

$("input[name=password]").focus(function() {
    var value = $("input[name=password]").val();
    if(value == "") {
        $(this).toggleClass("inputBg");
    }
});

$("input[name=password]").blur(function() {
    var value = $("input[name=password]").val();
    if(value == "") {
        $(this).toggleClass("inputBg");
    }
});

CSS начинается с тега Label, стилизованного так же, как ваш входной класс, с позицией относительнои добавлен блок отображения.Тогда есть два класса для ввода.Тот, который имеет правильную ширину, высоту и т. Д., Позиционируется абсолютно, с более высоким z-индексом, чем метка, НО БЕЗ ФОНА.Второй класс точно такой же, но с фоном.

JQuery просто переключается между двумя классами, поэтому вы увидите метку под вводом, но когда вы нажмете на ввод, появится фон, и вы сможете ввести текст поверх него.Прекрасно работает, должен работать во всех браузерах (хотя проверено только в Safari на Mac и IE / Firefox на Windows).Отличная идея, Квентин!

Answer 5

Обычно браузеры недовольны изменением атрибута type элементов input с помощью JavaScript. Большинство обходных путей включают клонирование input с новым type и удаление оригинала.

Вы можете разместить метку поверх формы ввода и убрать ее в фокусе.

Вы должны учитывать последствия не использования type="password" - это семантически правильный вариант.

Обновление

Прочитав ответ Дэвида Дорварда , вам следует тщательно обдумать его весьма веские аргументы.