Ввод текста по умолчанию для поля пароля

Question

Есть ли способ ввести текст по умолчанию в поле пароля?

Обычно у меня есть поле пароля, которое должно маскировать чей-то идентификатор, но прежде чем пользователь введет идентификатор, я хочу, чтобы значение поля показывало «Введите здесь свой идентификатор»

Есть ли способ сделать это?

Answer 1

Если вы хотите использовать обычный javascript, вы можете сделать:

HTML

<label for="placeholder">Password:</label>
<input type="text" id="placeholder" value="Enter password here" onFocus="setPass();"/>
<input type="password" id="password" value="" onBlur="checkPass();" style="display: none;"/>

Javascript

function setPass() {
    document.getElementById('placeholder').style.display = 'none';
    document.getElementById('password').style.display = 'inline';
    document.getElementById('password').focus();
}
function checkPass() {
    if (document.getElementById('password').value.length == 0) {
        document.getElementById('placeholder').style.display = 'inline';
        document.getElementById('password').style.display = 'none';
    }
}

http://jsfiddle.net/Lx4NN/1/

Answer 2

В настоящий момент, если вы хотите поддерживать все типы браузеров (в которых включен JavaScript), вам следует использовать JavaScript.Я считаю, что есть несколько сценариев, которые вы могли бы использовать, но, конечно же, написание сценария самостоятельно - тоже хороший вариант.На более ранней стадии я сам написал скрипт для этого, в котором я изменил поле ввода TYPE на «текст», когда пароль не был введен.Когда пользователь сфокусировался на поле пароля, тип был изменен обратно на «пароль».

Mind Internet Explorer: я считаю, что 7 и ниже не позволяют вам изменить тип поля.Но любой другой достойный браузер это делает.

Если вы требуете, чтобы браузеры, поддерживающие как минимум HTML 5, могли его использовать, посмотрите на HTML 5 заполнителей .Я думаю, что он делает именно то, что вы хотите.

Проверьте эту ссылку для получения дополнительной информации , там также есть информация о заполнителях.Повеселись!;)

Answer 3

<input type="text" value="Enter your ID here"
    onfocus="if (this.value == 'Enter your ID here') this.value = ''"
    onblur="if (this.value == '') this.value = 'Enter your ID here'"
/>