форма логина-пароля

kalyaka-malyaka · December 8, 2008

Доброго времени суток

Вопрос у меня по форме логина-пароля.

Задача - сделать следующее:

Я понимаю, что форму пароля надо делать так:

также я понимаю, что чтобы в поле было вбито заранее слово password, надо его вписать в value=""

но если у инпута тип password, то содержимое value сразу отображается звездочками.

а можно как-то сделать, чтобы при загрузке страницы в поле пароля стояло видимое слово password, а набирался потом пароль скрытым - звездочками?

что-то путано у меня получилось объяснить

я просто не могу придумать, что у гугла спросить и в какую сторону копать.

помогите, плиз.

rash · December 8, 2008

Можно поверх инпута наложить блок с текстом, который убирать при щелчке по нему или получении инпутом фокуса.

Пробовал сначала выводить в поле text, а потом менять его тип на password, но это не срабатывало.

rus · December 8, 2008

А так не прокатит:

kalyaka-malyaka · December 8, 2008

А так не прокатит:
<input type="password" name="passw" value="password" onfocus="if(this.value == 'password') {this.value='';};" onblur="if(this.value == '') {this.value='password';};" maxlength="10"/>

так все равно сразу точки видны, а не слово password

Можно поверх инпута наложить блок с текстом, который убирать при щелчке по нему или получении инпутом фокуса.

м... пытаюсь представить. если блок поверх, то придется 2 раза кликать - чтобы убрать, и чтобы попасть мышкой в инпут. а если к фокусу притвязываться, то, наверное, вообще не получится. как инпут получит фокус, если поверх лежит блок?

Пробовал сначала выводить в поле text, а потом менять его тип на password, но это не срабатывало.

вот я тоже в эту сторону думала...

но как-то же это делают!

я сама не припомню, честно говоря. но мой дизайнер утверждает, что 100 раз видел это в тырнете. и отрисовал именно так. и это приняли. а я в джаваскрипте дуб-дерево. могу только копипастить рабочие скрипты.

блин

e1f · December 8, 2008

Как вариант -- установите фразу Пассворд бекграундом в инпут, и убирайте его по фокусу

Vlad · December 8, 2008

Вывел текстовое поле через innerHTML и при щелчке оно заменяется полем с паролем. Сделано на коленке, но смысл понятен.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Untitled Document</title>
<script type="text/javascript">
function f1 () {
document.getElementById("pass").innerHTML = '<input type="text" value="Пароль, быстро!" onclick="f2()">';
}
function f2 () {
document.getElementById("pass").innerHTML = '<input type="password" id="pass_field">';
document.getElementById("pass_field").focus();
}
</script>
</head>
<body onLoad="f1()">
<form>
<div id="pass"></div>
</form>
</body>
</html>

SelenIT · December 8, 2008

Еще вариант "на коленке":

<!doctype html>
<title>Login form</title>
<style type="text/css">
label { position: relative; float: left; width: 100px; line-height: 20px; margin: 0; padding: 2px; }
label input { position: absolute; width: 100px; height: 20px; top: 0; left: 0; background: transparent; }
</style>
<script type="text/javascript">
function enter(obj) { obj.style.background='#fff'; }
function leave(obj) { obj.style.background=(obj.value.length)?'#fff':''; }
</script>
<form>
<p>
<label>Login <input type="text" name="login" onfocus="enter(this)" onblur="leave(this)"></label>
<label>Password <input type="password" name="passw" onfocus="enter(this)" onblur="leave(this)"></label>
<input type="submit" value="login">
</p>
</form>

Если бы не IE7-, вместо ф-ции enter(obj) можно было бы обойтись псевдоклассом input:focus. Плюс была попытка подобие graceful degradation при отключении стилей...

Упс, поторопился. В IE7 код все равно глючит, а в IE6 почему-то вообще ввод сломался . Приношу извинения.

Edited December 8, 2008 by SelenIT

s0rr0w · December 8, 2008

 <style type="text/css">  
 	.hiddenBlock { display: none }
 </style>
<input type="text" onfocus="this.className='hiddenBlock'; this.nextSibling.className=''; this.nextSibling.focus();" value="Pass"><input type="password" onblur="if( this.value == ''){ this.className='hiddenBlock'; this.previousSibling.className='' }" value="" class="hiddenBlock">

rash · December 8, 2008

м... пытаюсь представить. если блок поверх, то придется 2 раза кликать - чтобы убрать, и чтобы попасть мышкой в инпут. а если к фокусу притвязываться, то, наверное, вообще не получится. как инпут получит фокус, если поверх лежит блок?

Если кликнуть по блоку - убираем его и передаем фокус полю ввода.

Иначе оно может получить фокус, например, по табуляции с предыдущего поля ввода.

Но я сам не считаю это решение хорошим.

s0rr0w · December 8, 2008

Одна из ошибок мышления большинства отписавшихся заключается в том, что все пытаются решить задачу с исходными данными. А ведь намного легче решать задачу, если изменить исходные данные, и тогда решение может быть куда лучше, проще для изменений, иметь меньше багов и глюков.

rash · December 8, 2008

Одна из ошибок мышления большинства отписавшихся заключается в том, что все пытаются решить задачу с исходными данными. А ведь намного легче решать задачу, если изменить исходные данные, и тогда решение может быть куда лучше, проще для изменений, иметь меньше багов и глюков.

Совершенно согласен. Поэтому и сказал, что не считаю свой вариант удачным.

Из предложенных, кстати, мне понравился своей простотой вариант со словом на фоновом изображении.

kalyaka-malyaka · December 8, 2008

 <style type="text/css">  
 	.hiddenBlock { display: none }
 </style>
<input type="text" onfocus="this.className='hiddenBlock'; this.nextSibling.className=''; this.nextSibling.focus();" value="Pass"><input type="password" onblur="if( this.value == ''){ this.className='hiddenBlock'; this.previousSibling.className='' }" value="" class="hiddenBlock">

шикарно!!! спасибо огромное ))

вариант с фоновой картинкой красив, но этот, ИМХО, универсален - нужный эффект и при отключенных картинках.

всем большое спасибо за помощь, что бы я без вас делала *растеклась и впиталась от чЮЙств*

s0rr0w · December 8, 2008

Совершенно согласен. Поэтому и сказал, что не считаю свой вариант удачным.
Из предложенных, кстати, мне понравился своей простотой вариант со словом на фоновом изображении.

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

Но он прост. Это плюс.

Yulia · December 9, 2008

s0rr0w, а что предложите вы?

kalyaka-malyaka · December 9, 2008

s0rr0w, а что предложите вы?

так предложил уже

s0rr0w · December 9, 2008

s0rr0w, а что предложите вы?

Внимательнее читайте

Yulia · December 10, 2008

ой, и правда. Пропустила, потому что не ожидала от вас готового решения.

Решение конечно компактное, но на мой взгляд сложное к восприятию. Придумаю проще - напишу.

spdif · December 10, 2008

Вот ребята, обратите обратите внимание какая красота, пользуйте наздоровье, тут все четко, все как надо!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">
body {
	font-size: 1em;
	font-family: arial,helvetica,sans-serif;
}

form#login {
	padding: 6px;
	position: relative;
	border: 1px solid grey;
}

div#username, div#password {
	position: relative;
	float: left;
	margin-right: 3px;
}

input#username-field, input#password-field {
	width: 10em;
}

label.overlabel {
	color: #999;
}

label.overlabel-apply {
	position: absolute;
	top: 3px;
	left: 5px;
	z-index: 1;
	color: #999;
}
</style>

<script type="text/javascript">
function initOverLabels () {
if (!document.getElementById) return;	  
var labels, id, field;
labels = document.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {	
if (labels[i].className == 'overlabel') {
id = labels[i].htmlFor || labels[i].getAttribute('for');
if (!id || !(field = document.getElementById(id))) {
continue;
}
labels[i].className = 'overlabel-apply';
if (field.value !== '') {
hideLabel(field.getAttribute('id'), true);
}
field.onfocus = function () {
hideLabel(this.getAttribute('id'), true);
};
field.onblur = function () {
if (this.value === '') {
hideLabel(this.getAttribute('id'), false);
}
};
labels[i].onclick = function () {
var id, field;
id = this.getAttribute('for');
if (id && (field = document.getElementById(id))) {
field.focus();
}
};
}
}
};
function hideLabel (field_id, hide) {
var field_for;
var labels = document.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
field_for = labels[i].htmlFor || labels[i].getAttribute('for');
if (field_for == field_id) {
labels[i].style.textIndent = (hide) ? '-1000px' : '0px';
return true;
}
}
}
window.onload = function () {
setTimeout(initOverLabels, 50);
};
</script>

</head>
<body>

<form id="login" action="#" method="post">
<div id="username">
<label for="username-field" class="overlabel">Логин</label>
<input id="username-field" type="text" name="username" title="Username" value="" tabindex="1">
</div>
<div id="password">
<label for="password-field" class="overlabel">Пароль</label>
<input id="password-field" type="password" name="password" title="Password" value="" tabindex="2">
</div>
<div id="submit">
<input type="submit" name="submit" value="Войти!" tabindex="3">
</div>
</form>

</body>
</html>

(Всем удачи.)

kalyaka-malyaka · December 10, 2008

Вот ребята, обратите обратите внимание какая красота, пользуйте наздоровье, тут все четко, все как надо!

Очень красиво! Здорово ))

Забираю в копилочку )))))))))) Спасибо!

s0rr0w · December 10, 2008

if (labels[i].className == 'overlabel') 
...
labels[i].className = 'overlabel-apply';

А если понадобится использовать больше классов для лейбла?

window.onload = function () {
setTimeout(initOverLabels, 50);
};

А если мне нужно будет на странице использовать еще какие-то функции, которые будут загружаться по onload'у?

spdif · December 10, 2008

Очень красиво! Здорово ))
Забираю в копилочку )))))))))) Спасибо!

Как говорицо, от нашего стола к вашему.

spdif · December 11, 2008

А если понадобится использовать больше классов для лейбла?
А если мне нужно будет на странице использовать еще какие-то функции, которые будут загружаться по onload'у?

Ну если понадобится, то надо взять и сделать.

Ведь что требовалось то и представленно.

Searcher · December 11, 2008

А если понадобится использовать больше классов для лейбла?
А если мне нужно будет на странице использовать еще какие-то функции, которые будут загружаться по onload'у?

1. Расширяется условие if и все...

2. А что мешает прописать эти функции в событии?!

window.onload = function () {
setTimeout(initOverLabels, 50);
oneMoreFunction();
otherFunction();
};

s0rr0w · December 11, 2008

Ну если понадобится, то надо взять и сделать.
Ведь что требовалось то и представленно.

А можно сделать одну функцию, которая будет проверять наличие имени класса среди всей строки className, что уберет кучу дальнейших проблем с переделками.

1. Расширяется условие if и все...

Отлично придумано! И при каждом чихе вы будете переписывать функцию? Отличный подход!

2. А что мешает прописать эти функции в событии?!
window.onload = function () {
setTimeout(initOverLabels, 50);
oneMoreFunction();
otherFunction();
};

Если брать статический HTML, то ничего. Если брать генерируемый сервером код, то решение явно неудобное. Чтобы подключить модуль, который будет требовать обработчика onload события, потребуется или специальный модуль наполнения этого обработчика, или ручной труд. Это дополнительная и никому не нужная работа. Этого можно избежать.

Ogalig · December 12, 2008

Один из выходов это расположить в самом конце скрипт вызова нужной ф-ии. тогда он сработает только после того как загрузиться все содержимое страницы. Есть еще какой-то способ через прописывание эвента, но я его не помню.

s0rr0w · December 12, 2008

Один из выходов это расположить в самом конце скрипт вызова нужной ф-ии. тогда он сработает только после того как загрузиться все содержимое страницы. Есть еще какой-то способ через прописывание эвента, но я его не помню.

Первый способ используется тогда, когда во втором не нужно соблюдать порядок вызова функций.

Sign In

форма логина-пароля

Question

Link to comment

Share on other sites

40 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information