0

我有一个输入 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"/>

我对可能的解决方案持开放态度。

4

1 回答 1

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"/>
于 2011-02-27T17:33:28.843 回答