JavaScript - 使用背景图像加载问题输入占位符文本
我有一个输入 type="text" 字段，并尝试用某些默认文本的背景图像替换未得到广泛支持的 HTML5 占位符属性。
在 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"/>
我对可能的解决方案持开放态度。
I have an input type="text" field and am trying to substitute the HTML5 placeholder property that is not widely supported with a background image of some default text.
And in JavaScript, removing the background image when the form receives focus (so that the text the user types in the field does not overlap with the text in the background image) and replacing the background image when the input loses focus (I am using the onBlur event).
This works fine except that when a user types text into the input field, heads to another page without submitting this text and hits the back to previous page button in their browser, the page reloads but with their previous text, that they did not submit, still in the input field on top of the background image.
I tried to fix this by checking if the form has value when the page loads, and if it does then remove the background image but this part isn't working for me.
<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"/>
I am open for possible solutions.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我解决了！我只是将 onload 事件放入我的 body 元素而不是 input 元素中，并更改了“this”。到“document.getElementById('食物')”。因为显然 onload 事件仅适用于文档本身（主体元素）和图像。
所以，这就是我的 body 元素的外观：
这就是我的输入元素的外观：
I solved it! I just put the onload event into my body element instead of the input element and changed the "this." to "document.getElementById('food')." because apparently the onload event only works with the document itself (body element) and images.
So, this is how my body element looks:
And this is how my input element looks: