показать и скрыть текст Span / Label в текстовом поле

Question

Я пытаюсь реализовать простой трюк, который бы скрывал span / label внутри текстового поля, когда пользователь начинает вводить текст в соответствующем текстовом поле, и отображал его при размытии, если текстовое поле пусто.

(Это реализовано напользователь входит в форму) Пока все работает нормально, а вот demo

Но это не работает в следующем сценарии:

1) Если пользователь вводит имя пользователя, ранееотображается список введенных имен пользователей (данные формы, сохраняемые браузером при выключенном автозаполнении).И если пользователь выбирает имя пользователя щелчком мыши из списка, поле пароля заполняется автоматически.Теперь, хотя поле пароля имеет значение, оно не будет скрывать интервал.(keydown / focus / click / change событие поверх текстового поля не помогает в этом случае)

2) Когда имя пользователя / пароль неверны, страница перезагружается, текстовое поле имени пользователя в последний раз вводилосьзначение.Но все же диапазон над ним отображается.(Я пытался проверить, пусто ли текстовое поле имени пользователя при загрузке страницы. Это не сработало)

Может кто-нибудь помочь мне исправить эти вещи?

Спасибо взаранее ...:)

Answer 1

Что вам нужно, это плахолдер.Заполнитель был стандартизирован html5 и может быть легко реализован с помощью различных плагинов jquery (здесь one ).

Я предлагаю вам использовать эти решения, так как они являются стандартами,идеальным решением является использование html5, а затем отступление к javascript для более старых браузеров.

Посмотрите на эту форму, где я реализовал плахолдеры: http://www.consiglio.regione.lombardia.it/web/crl/BancheDati/atti_si

Когда вы вставляете букву в поле ввода,текст исчезает.Это делается с помощью этого плагина.

Answer 2

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

<input name="first_name" type="text" autocomplete="off">

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

Answer 3

Кажется, вы пытаетесь изобрести колесо здесь.Отметьте этот уже отвеченный вопрос на ту же тему: как сделать, чтобы текстовое поле html показывало подсказку, когда пусто