DIV輸入標籤值改變顏色

我有我的HTML標記代碼如下問題：DIV輸入標籤值改變顏色

<div id="searchbar"><input name="searchbar" type="text" id="searchfield" value="some text" onfocus=" 
if(this.value==this.defaultValue) 
    this.value=''; 
    this.style.color='#11111'" 
onblur=" 
if(this.value=='') 
    this.value=this.defaultValue; 
    this.style.color='#22222' 
if(this.value==this.defaultValue) 
    this.style.color='#111111'"

還行，主要目的是批准，在我searchfield其中標準值與「某個給定文字「應該只爲新條目改變顏色。

消息「一些文本」將在點擊消失後消失。現在，新值應該從標準＃222222更改爲＃111111。其次，離開這個領域時，必須有兩種不同的方式來看待。第一種可能性應該是，如果新值與具有「一些文本」的標準值不同，則顏色應該保持在＃222222。第二種可能性是如果新條目與標準值相同或者甚至沒有條目被創建，那麼顏色應該變回默認的＃222222。所以上面的代碼工作到最後一點。

如果有人可以給我建議如何解決，我真的很感激。非常感謝。

來源

2012-06-20 bonny

你需要使用jquery！ onchange和ajax打個電話，告訴你這個值是否是新的或其他值。 – JellyBelly

@JellyBelly，請注意[jQuery不是所有事情的答案]（http://i.stack.imgur.com/sGhaO.gif）。 –

一些更具體的信息會很好。謝謝。 – bonny

-2

，而不是你的長期複雜的代碼，只需使用HTML5 placeholder

Jsfiddle Example

HTML

<div id="searchbar"> 
<input name="searchbar" type="text" id="searchfield" placeholder="Some Text" /> 
</div>

CSS

#searchbar input { 
    color: green; 
} 
input::-webkit-input-placeholder { 
    color: red; 
} 
input:-moz-placeholder { 
    color: red; 
}

根據您的意願更改顏色。

注意：Placeholder在IE中不支持。

UPDATE

如果你想用一個佔位符來支持所有瀏覽器都使用這placeholder--a jQuery plugin和它tweek的style.css實現你的結果。

來源

2012-06-20 10:01:17 Libin

你好，謝謝你的回答。使用佔位符不是一種選擇，因爲我有很多即用戶。即使我你的代碼與前面提到的是同樣的問題。問題在於，顏色始終保持綠色。謝謝 – bonny

我沒有得到你真正想要實現的。根據我的代碼，如果沒有輸入（默認文本），文本顏色將爲紅色。但是當用戶輸入顏色時會變成綠色。這是你需要的嗎？ – Libin

我使用Firefox和標準值出現綠色。當打字時它也會變成綠色。之後甚至會變綠。只是綠色。 – bonny

可以使用:focus僞類

CSS焦點更改CSS像這樣

的CSS

input[type="text"]{ 
color:white; 
    background:red; 
    padding:5px; 
} 




input[type="text"]:focus{ 
color:black; 
    background:yellow; 
}

現場演示http://jsfiddle.net/VQ99D/

來源

2012-06-20 09:58:03

你好，謝謝你的回答。此代碼與我的代碼具有相同的問題。看，問題是當輸入一些文本時，顏色以白色開始，而在輸入內容時變爲黑色。之後它切換回白色。這是我想避免的。這是兩種不同顏色的問題。如果新值與標準值不同，它應該改變並保持黑色。如果它是空的或者像標準值一樣應該變回白色。你懂了？謝謝。 – bonny

DIV輸入標籤值改變顏色

回答

相關問題