Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.11.2009, 22:10
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Надпись в поле ввода password
Все никак не приходилось самому сделать такую штутку, вот сейчас спросили каким образом это можно реализовать, получился такой вариант:

CSS:
.field {
	position: relative;
}
.field label {
	position: absolute;
	top: 2px;
	left: 3px;
}
.field label.hidden {
	left: -9999px;
}


javascript:
window.onload = function () {
	var input = document.getElementById("pwd");
	var label = input.parentNode.getElementsByTagName("label")[0];
	if (!input.value) {
		label.className = "";
	}
	input.onfocus = function () {
		label.className = "hidden";
	};
	input.onblur = function () {
		if (!input.value) {
			label.className = "";
		}
	};
};


HTML:
<form action="">
	<fieldset>
		<div class="field">
			<label for="pwd" class="hidden">Enter password</label>
			<input id="pwd" type="password" />
		</div>
	</fieldset>
</form>


Пример

Вроде везде работает. Думаю, пригодится кому-нибудь.
Вложения:
Тип файла: zip pwd.zip (661 байт, 11 просмотров)

Последний раз редактировалось Octane, 12.11.2009 в 13:38. Причина: рабочий вариант смотрите ниже
Ответить с цитированием
  #2 (permalink)  
Старый 11.11.2009, 23:17
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от Octane
Вроде везде работает.
У тебя браузер пароли запоминает? Он когда их подставляет, никаких focus/blur не происходит, в результате наложение метки на пароль будет.

Решение: постоянно по таймауту проверять, не произошло ли чего с полями. А focus/blur остаются, чтобы запоминать состояние фокуса.
Ответить с цитированием
  #3 (permalink)  
Старый 12.11.2009, 00:09
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Хм… фокс пароли до window.onload подставляет, а я потом проверку делаю:
if (!input.value) {
    label.className = "";
}

Поэтому работает. Вот в IE действительно косяк, он подставляет пароль после выбора логина из выпадающего списка. Завтра поправлю, сделаю по таймауту.

Последний раз редактировалось Octane, 12.11.2009 в 00:16.
Ответить с цитированием
  #4 (permalink)  
Старый 12.11.2009, 13:31
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Исправленный вариант:

CSS:
.field {
	position: relative;
}
.field label {
	position: absolute;
	top: 2px;
	left: 3px;
}
.field label.hidden {
	left: -9999px;
}


HTML:
<form action="">
	<fieldset>
		<div class="field">
			<label for="pwd" class="hidden">Enter password</label>
			<input id="pwd" type="password" />
		</div>
	</fieldset>
</form>


JаvaSсript:
var input = document.getElementById("pwd");
var label = input.parentNode.getElementsByTagName("label")[0];
var active = false;
function change() {
	label.className = input.value ? "hidden" : "";
}
input.onfocus = function () {
	active = true;
	label.className = "hidden";
};
input.onblur = function () {
	active = false;
	change();
};
(function () {
	if (!active) {
		change();
	}
	setTimeout(arguments.callee, 300);
}());


Пример
Вложения:
Тип файла: zip pwd.zip (778 байт, 16 просмотров)

Последний раз редактировалось Octane, 12.11.2009 в 13:45.
Ответить с цитированием
  #5 (permalink)  
Старый 08.08.2014, 12:57
Аспирант
Отправить личное сообщение для pogranpv Посмотреть профиль Найти все сообщения от pogranpv
 
Регистрация: 07.08.2014
Сообщений: 37

Сообщение от Octane Посмотреть сообщение
Хм… фокс пароли до window.onload подставляет, а я потом проверку делаю:
if (!input.value) {
    label.className = "";
}

Поэтому работает. Вот в IE действительно косяк, он подставляет пароль после выбора логина из выпадающего списка. Завтра поправлю, сделаю по таймауту.
а как без таймаута сделать? а то таймаут это же костыль
Ответить с цитированием
  #6 (permalink)  
Старый 09.08.2014, 03:48
Интересующийся
Отправить личное сообщение для Raydezm Посмотреть профиль Найти все сообщения от Raydezm
 
Регистрация: 01.12.2013
Сообщений: 26

Увы, браузеры не оповещают о том что делают что-то с паролями и прочим автозаполнением.

setTimeout(arguments.callee, 300);

Использование callee устарело с выходом ES5, использовать не рекомендуется.
https://developer.mozilla.org/en-US/...guments/callee
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поле ввода специальных символов alexsexystayl Серверные языки и технологии 1 06.11.2009 21:29
Сделать текстовое поле активным battrack1 Общие вопросы Javascript 3 11.06.2009 17:21
Переход между окнами ввода при заполнении. Бушка Общие вопросы Javascript 4 25.03.2009 15:40
трабл с перехватом некоторых символов в поле ввода barbiturat Events/DOM/Window 5 28.08.2008 14:32
Замена маркера в поле password Esciloner (X)HTML/CSS 1 07.07.2007 14:12