0

我的 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。所以上面的代码一直工作到最后一点。

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

4

2 回答 2

1

你可以使用:focus 伪类

css on 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/

于 2012-06-20T09:58:03.767 回答
-2

无需使用冗长复杂的代码，只需使用 HTML5placeholder

Jsfiddle 示例

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;
}​

根据您的意愿更改颜色。

注意：占位符在 IE 中不支持。

更新

如果你想使用一个占位符来支持所有浏览器，请使用这个占位符——一个 jQuery 插件和 tweekstyle.css来实现你的结果。

于 2012-06-20T10:01:17.317 回答