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

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

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

Автор: jikaka 27.8.2010, 12:03

использую такую конструкцию:

Код


<form name="loginform" method="post" action="login.php"> 
<input type="text" name="user_name" value="Логин" onFocus="if(this.value=='Логин')this.value='';" onBlur="if(this.value=='')this.value='Логин';" />
<input type="text" name="user_pass" value="Пароль" onFocus="if(this.value=='Пароль')this.value='';" onBlur="if(this.value=='')this.value='Пароль';" />
<input type="submit" name="login" value="Войти" /> 
</form>

в данном случае в полях видны слова "Логин" и "Пароль", при клике на поле вводимые логин и пароль видны, а для пароля это неудобно
если ставлю во втором инпуте type="password", то в полях логин остается, а вместо слово "Пароль" идут звездочки

как мне сделать, чтобы в поле для пароле отображалось слово "Пароль", а при набирании пароля выводились ***** ?

заранее спасибо!

PS: надеюсь понятно объяснил...

Автор: ksnk 27.8.2010, 13:20

поверх инпута с паролем выложить надпись "Пароль". Скрывать ее по событиям "mousedown" на себе, focus, на инпуте. Восстанавливать по событию onblur на инпуте, если ничего не заполнено.

как-нибудь так

Код


<script src="jquery.js"></script>
<style>
.wrapper {
   padding:0;margin:0;display:inline-block; position:relative;
}
.wrapper span {
   display:block; position:absolute;top:0.2em;left:0.5em;
   color: red;
}

</style>
<script>
...
текст скрипта в сообщении ниже
...
</script>

<input type="text" alt="лагын">
<input type="password" alt="парол">

Можно , конечно, поковырятся в гугле на предмет слова 'placeholder', можно найти много интересного.

Автор: EmilRegis 27.8.2010, 13:22

попробуй при onkeyup скрывать поле пароля с type=text и показывать поле с type=password, которое заполнить значением из поля с type=text

Автор: ksnk 27.8.2010, 13:25

атрибут alt в этом примере взят из тех соображений, что атрибут placeholder, хоть и рекомендован лучшими собаководами. но пока считается невалидным... Хотя валиден ли атрибут alt для инпута - меня терзают сомнения smile

Автор: CruorVult 27.8.2010, 13:27

Код


<form name="loginform" method="post" action="login.php"> 
<input type="text" name="user_name" value="Логин" onFocus="if(this.value=='Логин')this.value='';" onBlur="if(this.value=='')this.value='Логин';" />
<input type="text" name="user_pass" value="Пароль" onFocus="if(this.value=='Пароль') {this.value=''; this.type='password'; this.focus();}" onBlur="if(this.value=='') {this.value='Пароль'; this.type='text'}" />
<input type="submit" name="login" value="Войти" /> 
</form>

Автор: ksnk 27.8.2010, 13:35

CruorVult, что произойдет при сабмите формы?

Кстати, изменение типа поля нужно бы проверять на разных броузерах. Вроде были какие-то проблемы с этим...

Автор: CruorVult 27.8.2010, 13:37

Цитата(ksnk @ 27.8.2010, 13:35

)

CruorVult, что произойдет при сабмите формы?

то что и должно. В чём подвох?

Автор: ksnk 27.8.2010, 13:42

CruorVult, иногда в POST будут попадать слова Логин и Пароль. Нужно будет включать дополнительные фильтры на эти слова при проверке формы на сервере.

Автор: CruorVult 27.8.2010, 13:45

Цитата(ksnk @ 27.8.2010, 13:42

)

CruorVult, иногда в POST будут попадать слова Логин и Пароль. Нужно будет включать дополнительные фильтры на эти слова при проверке формы на сервере.

само собой без проверки не обойтись.

скорее всего это совет автору smile

Автор: ksnk 27.8.2010, 13:48

Угу... Особенно если дизайнер когда-нибудь потом напишет вместо "Логин" - "Введите логин". после чего появится несколько юзеров с именем "Введите логин".

Автор: jikaka 27.8.2010, 14:07

CruorVult, спасибо огромное!

Добавлено через 13 минут и 58 секунд
метод CruorVult работает, но не во всех браузерах...
работает в мозилле и хроме
не канает в осле и опере

как быть? как выкрутиться?

Автор: ksnk 27.8.2010, 18:33

jikaka, изменения типов инпутов не работает в этих броузерах.
Можно мой вариант. Правда он для jQuery.
В предыдущем варианте допустил логическую ошибку. так что вот новый, немного причесанный и рабочий, вроде...

Код



$('input[alt!=]').each(function(){
            var alt=$(this).attr('alt');
            $(this).removeAttr('alt').wrap('<div class="wrapper"/>')
            .after('<span>'+alt+'</span>')
            .blur(function(){
                if($.trim($(this).val())===""){
                    $(this).parent().find('span').show();
                }
            })
            .parent().find('span').mousedown(function(){
                $(this).hide();//.parent().find('input').focus();
                var self=$(this).parent().find('input');
                setTimeout(function(){self.focus();},10);
            }).end().end()
            .focus(function(){
                $(this).parent().find('span').hide();
            })
            .trigger('blur');
})

Вероятно. можно оформить в виде плагина, но мне это пока не нужно...