div输入标签值改变颜色

Question

我的 html 标记中的代码存在以下问题：

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

好的，主要目标是批准在我的搜索字段中使用“某些文本”给出标准值应该只为新条目更改颜色。

该消息“一些文本”将在点击它时消失。现在，新值的颜色应该从标准 #222222 更改为 #111111。其次，当离开这个领域时，必须有两种不同的看待方式。第一种可能性应该是，如果新值与带有“一些文本”的标准值不同，则颜色应保持在 #222222。第二种可能性是，如果新条目与标准值相同，或者甚至没有输入，则颜色应更改回默认值 #222222。所以上面的代码一直工作到最后一点。

如果有人可以就如何解决问题给我建议，我将不胜感激。非常感谢。

Answer 1

你可以使用: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/

更多信息http://www.cssdrive.com/index.php/examples/exampleitem/focus_pseudo_class/

Answer 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 中不支持。

更新

如果您想使用占位符来支持所有浏览器，请使用此 placeholder--a jQuery plugin 并在其中添加 style.css 以实现您的结果。