Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Как сделать поле пароля

Автор: teroni 3.10.2012, 15:51

Дизайнер создал мне проблемку, пытаюсь решить её средствами JS.
Есть 2 стандартных инпута, в них написано

Код


"Логин"
"Пароль"

В хтмл это выглядит грубо говоря так:

Код


<input type="text" name="login" value="Логин" />
<input type="text" name="password" value="Пароль" />

Но при наведении мышки на поле логина оно должно становиться пустым, чтобы юзер начинал печатать свой ник без удаления слова "Логин". Это я сделал так:

Код


<input type="text" name="login" value="Логин" onfocus="if(this.value=='Логин') this.value=''" onblur="if(this.value=='') this.value='Логин';" />

Такое решение устраивает. Хотел сделать то же самое для поля пароля - но тут начались проблемы, т.к. получается, что поле должно из типа "text" превращаться в "password" (чтобы при заходе на страницу юзер видел слово "Пароль", а при вводе пароля в поле печатались звездочки, а не буквы).

Сделал так:

Код


<input type="text" name="password" value="Пароль" id="pole"  onfocus="polehide()" onblur="poleshow()"/>

где JS выглядит так:

Код


function polehide()
{
if (document.getElementById('pole').value!='Пароль')
   return 0;
document.getElementById('pole').value='';
document.getElementById('pole').type='password';
return 0; 
}

function poleshow()
{
if (document.getElementById('pole').value!='')
   return 0;
document.getElementById('pole').value='Пароль';
document.getElementById('pole').type='text';
return 0; 
}

В принципе работает, но есть 2 серьёзных минуса:
1) Браузер при таком раскладе не предлагает запомнить пароль.
2) В opere mini, которая вообще как-то криво работает с js, поле пароля приходит на скрипт входа почему-то пустым.

Сорри за многабукв, но может кто-то знает, как сделать грамотно такое поле пароля. Или видел на каких-то других сайтах подобное решение.

Автор: ksnk 3.10.2012, 16:17

Задача известная, много раз решенная, в некоторых случаях - даже на уровне броузера. Искать решения в гугле по слову `placeholder javascript`.

Автор: skyboy 3.10.2012, 20:30

Цитата(teroni @ 3.10.2012, 14:51

)

В opere mini, которая вообще как-то криво работает с js, поле пароля приходит на скрипт входа почему-то пустым.

можно сделать так: изначально это type="password", потом тип меняется. причем, для опера мини можно попытаться вообще ничего не менять