Facebook как форма для входа

Question

Я уже спросил question, похожее на это некоторое время назад, я думал, что решил свою проблему, но теперь, похоже, я этого не сделал. Работа с этой проблемой в течение некоторого времени, и я совершенно не знаю, как это сделать.

Ответ, который я получил из предыдущего вопроса, но когда я изменяю размер окна, метка пароля смещается при изменении размера окна. И он все равно не позиционируется в FF (3.0.5), но он работает в FF (3.5.6) и IE7, но снова все те же проблемы, что и при изменении размера окна.

То, что я пытаюсь сделать, это поместить ярлык за вход и, сделав это, кажется, что вход имеет значение «Пароль». Кто-нибудь знает, как facebook решил эту проблему?

www.facebook.com посмотреть на форму входа, поле пароля .. при нажатии на него пароль исчезнет, ​​и введите свой пароль.

Еще одна полезная ссылка, я получил за это http://dorward.me.uk/tmp/label-work/example.html от David Dorward , но он использует jquery, и мне разрешено использовать только прототип или чистый javascript. Могу ли я получить какую-либо помощь/комментарии/подсказки/трюки, с которыми я общался в течение некоторого времени, сейчас у меня просто нет идей.

Спасибо

Answer 1

Рассмотрите возможность использования фоновых изображений CSS для этого. Создайте два (прозрачных) фоновых изображения с нужным текстом и определите его в классе. Показывать его по умолчанию в пустых полях. Используйте событие JS focus, чтобы удалить класс, связанный с изображением, и использовать событие JS blur, чтобы проверить, нет ли значения и добавить класс, связанный с изображением.

Answer 2

Эта техника называется водяной знак, а в Интернете есть некоторые плагины для js-фреймворков и учебников, чтобы сделать это с помощью чистого javascript.

Я думаю, что Facebook использует небольшое обходное решение для отображения водяного знака с четким текстом в поле пароля: поле реального пароля скрыто, и вы видите текстовое поле с подсказкой пароля. Когда вы нажимаете на поле, элемент-заполнитель удаляется из dom, и отображается реальное поле пароля.

Answer 3

Проблема здесь не в JavaScript (поэтому использование библиотеки в примере не имеет значения).

Это базовое положение CSS.

Вам необходимо установить содержащий блок для размещения метки и входа внутри. Таким образом, все позиционирование относится к этому блоку, и это не имеет значения, о положении всего остального на странице.

position: relative Оставить заявку на элемент. Пример делает там здесь:

body.js .slim-control { 
    position: relative; 
    height: 1em; 
}