我有一个如下所示的输入框,
<input id="basic-search" type="text" value="Enter keyword or phrase" title="basic-search" class="form-text" size="38" onclick = "this.className = 'focused'; javascript:Reset();" onblur = "javascript:Reset();" />
.focused 和 form-text 的 css 是,
.focused {
color:black;
}
.form-text
{
background-color: #FFF;
color: #CCC;
}
加载的输入框内容是'Enter keyword or phrase',最初是灰色的。单击此框并在输入错误时字体颜色变为黑色(效果很好)。当删除内容时,跳转到下一个字段或在鼠标上按下内容“输入关键字或短语”变为黑色。它应该仍然是灰色的。我应该在 css 中进行哪些更改?任何输入都会有所帮助。谢谢。
注意:我注意到 stackoverflow 中的“标题”字段可以正常工作。我希望我的银行以同样的方式工作。
最佳答案
使用 onfocus 而不是 onclick。另外,对于你的 onblur,附加 css 类:
jsFiddle:http://jsfiddle.net/QybRX/14/
<input id="basic-search" type="text" value="Enter keyword or phrase" title="basic-search" class="form-text" size="38" onfocus="this.value=''; this.className = 'focused'; javascript:Reset();" onblur = "basicSearch()" />
<input type="text"/>
<script>
function basicSearch()
{
var element = document.getElementById("basic-search");
if ( element.value.length == 0 )
{
element.value = 'Enter keyword or phrase';
element.className = 'form-text';
}
else
{
element.className = 'focused';
}
javascript:Reset();
}
</script>
关于javascript - 输入框和 css 改变颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10384891/