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

好吧，主要目标是批准在我的搜索字段中，标准值以“some text”给出，应该仅为新条目更改颜色。

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

如果有人可以就如何解决问题给我建议我真的很感激。非常感谢。

Answer 1

您可以使用:focus 伪类

焦点改变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以获得结果。

div输入标签值改变颜色

2 个答案: