如何根據是否佔位符來更改textarea文本的顏色？

我基本上想要使用JavaScript重新創建HTML5「placeholder」屬性，以便與舊版瀏覽器兼容。如何根據是否佔位符來更改textarea文本的顏色？

我使用了OnFocus和OnBlur的組合，這很簡單，我已經用下面的代碼完成了這個工作：

<textarea onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">Placeholder text</textarea>

佔位符文本將是淺灰色（#CCC），然後當所述文本域被聚焦在其上會變成較暗的灰色（＃333）。這在CSS中沒有問題的情況下完成，但是，如果textarea的內容與原始佔位符的內容不同，我希望在未聚焦時顏色保持深灰色。

如果我的解釋不好，那麼這裏是一個（非常輕微）更好的解釋;

頁面加載---> textarea placeholder = #CCC --->用戶關注textarea ---> textarea內容變成＃333 --->用戶釋放焦點--->內容應該變回＃ CCC 除非它已被改變，在這種情況下，它應該停留＃333

大膽的位是我需要幫助！

謝謝！：d

編輯：該佔位符焦點消失的事實並不是一個問題，並不需要被「固定」

來源

2012-08-25 Michael Ruta

只是爲了澄清事實，如果文字是不同的，以「PLACEHOLD呃文本「，那麼當textarea失去焦點時，顏色應該保持爲＃333。如果文本是「佔位符文本」或保留爲空白，則顏色應恢復爲#CCC。 –

你仍然需要設置文本顏色#CCC與頁面加載CSS或JS（我的代碼重寫，如果它被集中設置，並恢復它僅在需要模糊）

<textarea onfocus="if(this.value==this.defaultValue)this.value='';this.style.color='#333'" onblur="if(this.value=='') {this.value=this.defaultValue;this.style.color='#CCC'}">Placeholder text</textarea>

來源

2012-08-25 11:24:33 11684

嘿，首先非常感謝，但它似乎沒有工作，你能展示一個事件監聽器的例子嗎？這會覆蓋外部CSS樣式嗎？ –

是的，它會覆蓋的東西。將測試JsFiddle，讓你張貼。 @MichaelRuta – 11684

修正了它！ @MichaelRuta JSFiddle在這裏找到：http://jsfiddle.net/11684/JSvmE/ – 11684

http://jsfiddle.net/DszSR/

textarea { 
    color: #ccc; 
} 

<textarea 
    onfocus="if(this.value==this.defaultValue) this.value=''; this.style.color = '#333';" 
    onblur="if(this.value=='') this.value=this.defaultValue; this.style.color = '#ccc';">Placeholder text</textarea>

來源

2012-08-25 11:28:27

如何根據是否佔位符來更改textarea文本的顏色？

回答

相關問題