Изменение содеожимого input

[DjTarik]

Я делаю простенькую форму входа:

<form action="#" enctype="application/x-www-form-urlencoded" method="get" id="#">
	  <fieldset>
		<input type="text" name="#" value="Логин" maxlength="#" />
		<input type="password" name="#" value="Пароль" maxlength="#" />
	  </fieldset>
	</form>

Мне нужно изменять значение value="" (при попадании в инпут) на пустое - и, если я ничего не ввел - вернуть слова "Логин/Пароль", а если ввел - оставить как есть.

Делаю так:

<input type="text" name="#" value="Логин" onfocus="this.value=this.value=='Логин'?'':this.value;" onblur="this.value=this.value==''?'Логин':this.value;" maxlength="#" />
<input type="text" name="#" value="Пароль" onfocus="this.value=this.value=='Пароль'?'':this.value;" onblur="this.value=this.value==''?'Пароль':this.value;" maxlength="#" />

Все работает, но!

У поля пароль - нужен тип type="password". А он должен быть под звездочками.

Как мне сделать так, чтобы изначально тип был "text", а при вводе - "password" и все вышенаписанное работало?

Спасибо.

[Justnewone]

  DjTarik said:

Я делаю простенькую форму входа:

<form action="#" enctype="application/x-www-form-urlencoded" method="get" id="#">
	  <fieldset>
		<input type="text" name="#" value="Логин" maxlength="#" />
		<input type="password" name="#" value="Пароль" maxlength="#" />
	  </fieldset>
	</form>

Мне нужно изменять значение value="" (при попадании в инпут) на пустое - и, если я ничего не ввел - вернуть слова "Логин/Пароль", а если ввел - оставить как есть.

Делаю так:

<input type="text" name="#" value="Логин" onfocus="this.value=this.value=='Логин'?'':this.value;" onblur="this.value=this.value==''?'Логин':this.value;" maxlength="#" />
<input type="text" name="#" value="Пароль" onfocus="this.value=this.value=='Пароль'?'':this.value;" onblur="this.value=this.value==''?'Пароль':this.value;" maxlength="#" />

Все работает, но!

У поля пароль - нужен тип type="password". А он должен быть под звездочками.

Как мне сделать так, чтобы изначально тип был "text", а при вводе - "password" и все вышенаписанное работало?

Спасибо.

при фокусе атрибут менять, не?

[DjTarik]

не получается завязать смену типа со сменой самой надписи value="Пароль", Что бы и то и то работало вместе...

[rash]

  Justnewone said:

при фокусе атрибут менять, не?

Не все браузеры позволяют менять тип инпута — считается опасным.

http://subbotnik.yandex.st/verstka-element...e/#/preview/18/

И дальше по слайдам.

[DjTarik]

Ну, отдельно я могу поменять, как тип инпута, таки его значение. А как сделать вместе это - я не понимаю. Если я к вышенаписанному добавлю:

"если value равно "Пароль" или пустое - тогда тип - "password", иначе тип - "text"."

onfocus="this.type=this.value=='Пароль'?'text':'password';" onblur="this.type=this.value==''?'password':'text';"

[Great Rash]

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

И вообще предлагаю оформить текст картинкой и положить его на бекграунд, а при получении фокуса ставить background: none;, тогда не придется заморачиваться с типом инпута.

[DjTarik]

Ща попробую

[s0rr0w]

Надпись "Пароль делать фоном". При вводе текста фон смещать на 250 пикселей вниз, если пусто - то возвращать на прежнюю позицию.

[Great Rash]

А я что написал?

[s0rr0w]

  Great Rash said:

А я что написал?

Упс...

[DjTarik]

Короче - сделал так:

function FocusInput(id,name)
		{
			if(id.value == name)
				id.value="";
		}

	function BlurInput(id,name)
		{
			if(id.value == "")
				id.value=name;
		}

<input type="text" name="#" value="Логин" onfocus="FocusInput(this,'Логин');" onblur="BlurInput(this,'Логин');" maxlength="#" />
<input type="text" name="#" value="Пароль" onfocus="FocusInput(this,'Пароль');" onblur="BlurInput(this,'Пароль');" maxlength="#" />

Пока что без смены типа. Верно? Ничего лишнего нету? Или как-нить в одну функцию можно засунуть?

[Great Rash]

Можно в одну функцию оформить, а не в две:

function defaultText(obj, text) {
	if (obj.value == text) {
		obj.value = '';
	} else if (obj.value == '') {
		obj.value = text;
	}
}

<input type="text" name="test" value="Юзер" onfocus="defaultText(this, 'Юзер');" onblur="defaultText(this, 'Юзер')" />

[rash]

  Great Rash said:

И вообще предлагаю оформить текст картинкой и положить его на бекграунд, а при получении фокуса ставить background: none;, тогда не придется заморачиваться с типом инпута.

Только если сайт одноязычный и не планируется доработка дизайна «на лету» после внедрения. Картинки менять надоест -)

[Great Rash]

А тогда их можно с помощью PHP генерить

[rash]

  Great Rash said:

А тогда их можно с помощью PHP генерить

А нужно?

[Great Rash]

Ну если сайт мультиязычный и требуется доработка на лету... Наверное это проще чем заморачиваться с кроссбраузерностью и сменой типов поля?

[rash]

  Great Rash said:

Ну если сайт мультиязычный и требуется доработка на лету... Наверное это проще чем заморачиваться с кроссбраузерностью и сменой типов поля?

А не надо заморачиваться со сменой типа поля, тем более что менять его тип позволяют не все.

Я уже привел ссылку на кроссбраузерное решение, которое хорошо интернациализируется и стилизуется с помощью CSS.

[s0rr0w]

  rash said:

Только если сайт одноязычный и не планируется доработка дизайна «на лету» после внедрения. Картинки менять надоест -)

Можно попробовать подсунуть текст под инпут, у которого поставить прозрачный фон.

[Great Rash]

По ссылке решения не увидел.

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

Посмотрев ссылку увидел, что при вводе пароля вводятся точки, а если оставить поле пустым и оно теряет фокус, то вставляются тоже точки. Что не соответствует требованиям. Пролистав пример дальше увидел глюк - когда вводишь в поле текст слово "подсказка" не пропадает вовсе, а остается как бы поверх текста. Смотрел в браузере Google Chrome, так что не такой уж там кроссбраузерный код.

[rash]

А вы пару слайдов вперед не прослистали?

Там вначале пример типичной ошибки приведен :-) Надо было дать ссылку сразу на слайд с решением.

[Great Rash]

Дайте если не лень, а то что-то я мотал туда-сюда, а решения так и не увидел.

[rash]

Здесь код разметки

http://subbotnik.yandex.st/verstka-element...e/#/preview/20/

Здесь логика

http://subbotnik.yandex.st/verstka-element...e/#/preview/21/

Здесь стили

http://subbotnik.yandex.st/verstka-element...e/#/preview/23/

Ну это скорее как основа, можно допилить под свои нужды.

[DjTarik]

Там написано, как этого добиться с помощью label + скрипт. Есть такой вариант - работает. Спасибо за ссылку.

Я сделал вот так:

function ChangeInput(id,name,flag)
		{
			if(id.value == name)
				{
					id.value="";
					if(flag)
						{
							id.type="password";
						}
				}
			else if(id.value == "")
				{
					id.value=name;
					if(flag)
						{
							id.type="text";
						}
				}
		}

<input type="text" name="#" value="Логин" onfocus="ChangeInput(this,'Логин');" onblur="ChangeInput(this,'Логин');" maxlength="#" />
<input type="text" name="#" value="Пароль" onfocus="ChangeInput(this,'Пароль',1);" onblur="ChangeInput(this,'Пароль',1);" maxlength="#" />

Верно?

Я просто никогда не учил JS - поэтому буду часто переспрашивать, как нужно аписать код и как грамотно...

А какие, вы говорите, могут быть траблы?

[Great Rash]

Я так и не понял, вот тут: http://subbotnik.yandex.st/verstka-element...e/#/preview/23/ типа готовый пример? Так он у меня не работает.

[rash]

Там не готовый пример, окончательного готового примера на слайдах нет.

Можно на главной Яндекса посмотреть в поле логина.

[Great Rash]

Ааа, теперь все понятно.

DjTarik

смена типа поля не будет работать в ИЕ (ни в одном (6-8), как я понимаю из-за политики безопасности или просто тупизма). Так что придется таки извращаться. С картинкой имхо самый простой способ если нет поддержки нескольких языков на сайте.

Ну или можно воспользоваться способом, который предложил rash.