Jump to content
  • 0

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


DjTarik
 Share

Question

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

<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" и все вышенаписанное работало?

Спасибо.

Link to comment
Share on other sites

Recommended Posts

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

<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" и все вышенаписанное работало?

Спасибо.

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

Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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="#" />

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

Link to comment
Share on other sites

  • 0

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

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, 'Юзер')" />

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

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/

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

Link to comment
Share on other sites

  • 0

Там написано, как этого добиться с помощью 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 - поэтому буду часто переспрашивать, как нужно аписать код и как грамотно...

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

Link to comment
Share on other sites

  • 0

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

DjTarik

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy