Javascript Ввод заполнителя текста с использованием проблемы загрузки фонового изображения - PullRequest
Новая
       21

Javascript Ввод заполнителя текста с использованием проблемы загрузки фонового изображения

0 голосов
/ 27 февраля 2011

Итак, у меня есть поле ввода type = "text", и я пытаюсь заменить свойство заполнителя html 5, которое не поддерживается широко, фоновым изображением некоторого текста по умолчанию. И в JavaScript удаление фонового изображения, когда форма получает фокус (чтобы текст, который пользователь вводит в поле, не перекрывалось с текстом на фоновом изображении) и замена фонового изображения, когда ввод теряет фокус (я использую onBlur событие). Это работает нормально, за исключением того, что когда пользователь вводит текст в поле ввода, переходит на другую страницу, не отправляя этот текст, и нажимает кнопку «Назад на предыдущую страницу» в своем браузере, страница перезагружается, но с предыдущим текстом, который они не отправили все еще в поле ввода в верхней части фонового изображения. Я попытался исправить это, проверив, имеет ли форма значение при загрузке страницы, и если да, то удаляет фоновое изображение, но эта часть не работает для меня. 

<input type="text" id="food" onLoad="if(this.value!=''){this.style.backgroundImage='none';}" onFocus="this.style.backgroundImage='none';" onBlur="if(!this.value){this.style.backgroundImage='url(pics/m_form_post.png)';}" name="food"/>

Я открыт для возможных решений. Спасибо за вашу помощь!

1 Ответ

1 голос
/ 27 февраля 2011

Я решил это!Я просто поместил событие onload в свой элемент body вместо элемента input и изменил «this».в "document.getElementById ('food')."потому что, очевидно, событие onload работает только с самим документом (элементом body) и изображениями.

Так вот как выглядит мой элемент body: 

<body onLoad="if(document.getElementById('food').value!=''){document.getElementById('food').style.backgroundImage='none';}">

И вот так выглядит мой элемент ввода: 

<input type="text" id="food" onFocus="this.style.backgroundImage='none';" onBlur="if(!this.value){this.style.backgroundImage='url(pics/m_form_post.png)';}" name="food"/>
...