Как сделать так, чтобы текстовое поле ie8 показывало курсор, если оно содержит водяной знак?

Question

Я использую относительный позиционный диапазон для создания водяного знака за прозрачным текстовым полем.Это прекрасно работает во всех браузерах, в которых он мне нужен, включая ie7, chrome и firefox.Однако в ie8, если вы щелкаете непосредственно по водяному знаку, текстовое поле, кажется, не регистрирует щелчок, и курсор не появляется.

Как я могу это исправить.

Я построил демонстрацию наjsfiddle ...

http://jsfiddle.net/SKeep/3nVTV/

Сделайте что-то, кроме поля ввода, в фокусе, а затем щелкните непосредственно на «Ввести имя», в ie8, и курсор не появится.Однако, если он работает в других браузерах, включая ie7, и он также работает, если щелкнуть перед водяным знаком.

Answer 1

То, что вы называете «водяным знаком», чаще называют «заполнителем».Загляните в атрибут HTML5 placeholder, если вы о нем не знаете (хотя IE8 также не поддерживает это, если я помню)

Относительно позиционируйте свой ввод и используйте свойство z-index чтобы изменить, какой элемент находится "сверху", и он должен работать нормально.

Но, поскольку вам, вероятно, нужно будет скрыть свой элемент span.watermark с помощью javascript, я бы порекомендовал добавить перехват blur и focus события на входе и изменение стиля и содержания значения входа.

Существуют плагины для большинства фреймворков javascripts, которые выполнят это за вас, если вы их используете.Или вы можете сделать это с несколькими строками js .

Если вы хотите держаться подальше от javascript, вы можете использовать небольшой фон image на входе ипоказать / скрыть его с помощью селекторов атрибутов, которые поддерживаются IE7 / 8.

Answer 2

Я думаю, что я исправилhttp://jsfiddle.net/SKeep/mf2ZW/

Есть вход без водяного знака и один, чтобы вы могли легко переключаться между входами.Кажется, работает на всех современных браузерах (например, Firefox, Safari, Opera) на ПК.Требуется некоторое тестирование на Mac.

Answer 3

Я добавил обходной путь, который добавляет функцию щелчка к самому водяному знаку, который затем устанавливает фокус на текстовое поле.

http://jsfiddle.net/SKeep/mf2ZW/