Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> скрытие пароля в форме 
:(
    Опции темы
jikaka
Дата 27.8.2010, 12:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 18
Регистрация: 27.8.2010

Репутация: нет
Всего: нет
использую такую конструкцию:
Код

<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: надеюсь понятно объяснил...
PM MAIL   Вверх
ksnk
Дата 27.8.2010, 13:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386
поверх инпута с паролем выложить надпись "Пароль". Скрывать ее  по событиям "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', можно найти много интересного.

Это сообщение отредактировал(а) ksnk - 27.8.2010, 18:37


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
EmilRegis
Дата 27.8.2010, 13:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 306
Регистрация: 21.9.2007

Репутация: 1
Всего: 4
попробуй при onkeyup скрывать поле пароля с type=text и показывать поле с type=password, которое заполнить значением из поля с type=text
PM MAIL   Вверх
ksnk
Дата 27.8.2010, 13:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
CruorVult
Дата 27.8.2010, 13:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 13
Всего: 28
Код

<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> 


Это сообщение отредактировал(а) CruorVult - 27.8.2010, 13:34
PM MAIL Skype   Вверх
ksnk
Дата 27.8.2010, 13:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386
CruorVult, что произойдет при сабмите формы?

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

Это сообщение отредактировал(а) ksnk - 27.8.2010, 13:37


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
CruorVult
Дата 27.8.2010, 13:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 13
Всего: 28
Цитата(ksnk @  27.8.2010,  13:35 Найти цитируемый пост)
CruorVult, что произойдет при сабмите формы?

то что и должно. В чём подвох?
PM MAIL Skype   Вверх
ksnk
Дата 27.8.2010, 13:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
CruorVult
Дата 27.8.2010, 13:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 13
Всего: 28
Цитата(ksnk @  27.8.2010,  13:42 Найти цитируемый пост)
CruorVult, иногда в POST будут попадать слова Логин и Пароль. Нужно будет включать дополнительные фильтры на эти слова при проверке формы на сервере. 

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

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

Это сообщение отредактировал(а) CruorVult - 27.8.2010, 13:46
PM MAIL Skype   Вверх
ksnk
Дата 27.8.2010, 13:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
jikaka
Дата 27.8.2010, 14:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 18
Регистрация: 27.8.2010

Репутация: нет
Всего: нет
CruorVult, спасибо огромное!

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

как быть? как выкрутиться?
PM MAIL   Вверх
ksnk
Дата 27.8.2010, 18:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386
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');
})


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

Это сообщение отредактировал(а) ksnk - 27.8.2010, 18:35


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0955 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.