Question

所以我有一个输入类型=“文本”字段，我试图用一些默认文本的背景图片替换不受广泛支持的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"/>

我愿意接受可能的解决方案。谢谢你的帮助！

Answer 1

我解决了！我只是将onload事件放入我的body元素而不是input元素，并更改了“this”。 “document.getElementById（'food'）。”因为显然onload事件只适用于文档本身（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"/>

Javascript使用背景图像onload问题输入占位符文本

1 个答案: