Javascript輸入佔位符文本使用背景圖像onload問題

所以我有一個輸入類型=「文本」字段，並試圖用一些默認文本的背景圖像不被廣泛支持的HTML 5佔位符屬性。在JavaScript中當表單獲得焦點時刪除背景圖像（以便用戶在字段中鍵入的文本與背景圖像中的文本不重疊），並在輸入失去焦點時替換背景圖像（我正在使用onBlur事件）。這可以很好地工作，只是當用戶在輸入字段中鍵入文本時，會前往另一個頁面而不提交此文本，並在瀏覽器中返回到上一頁按鈕，頁面會重新加載，但是會使用之前的文本加載，但他們沒有提交，仍然在背景圖像頂部的輸入欄中。我試圖通過檢查頁面加載時窗體是否有價值來解決這個問題，如果它確實刪除了背景圖片，但這部分不適合我。Javascript輸入佔位符文本使用背景圖像onload問題

<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"/>

我對可能的解決方案開放。謝謝你的幫助！

來源

2011-02-27 Web_Designer

這是基於瀏覽器的AFAICT。瀏覽器在頁面加載時填充它。 – Blender 2011-02-27 04:39:33

我可以解決這個問題，所以它會在所有瀏覽器中帶來理想的效果嗎？ – 2011-02-27 04:42:04

我解決了！我只是把onload事件放入我的body元素而不是input元素，並改變了「this」。到「document.getElementById（'食物'）」。因爲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-27 17:33:28

Javascript輸入佔位符文本使用背景圖像onload問題

回答

相關問題