输入框和css改变颜色答案

【问题标题】：Input box and css altering colors输入框和css改变颜色
【发布时间】：2012-04-30 13:55:15
【问题描述】：

我有一个如下所示的输入框，

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

加载时输入框的内容是“输入关键字或短语”，最初是灰色的。单击此框并在输入错误时字体颜色变为黑色（效果很好）。当删除内容时，选项卡到下一个字段或在鼠标上按内容“输入关键字或短语”变为黑色。它应该仍然是灰色的。我应该在css中做些什么改变？任何投入都会有所帮助。谢谢。

注意：我注意到 stackoverflow 中的“标题”字段可以正常工作。我希望我的 boc 以同样的方式工作。

【问题讨论】：

您当然不需要 javascript: URL 方案，除非您已在页面的其他位置将基本脚本语言定义为 VBScript。

标签： javascript css user-interface frontend

【解决方案1】：

使用 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>

【讨论】：

当您移出输入框时，该字段显示为灰色
@javaiText 我以为你希望用户继续前进时它是灰色的？也许我读错了你的问题。你想要黑色吗？
如果有任何文本，那么当您移出输入框时它应该是黑色的...如果内容被删除并且您移出框，那么会出现默认消息并且应该是灰色...非常类似于 stackoverflow 中的“标题”输入框。

【解决方案2】：

发生的情况是，当用户单击输入字段时，您正在向输入字段添加“聚焦”类，但该类永远不会被删除。您要么需要移除 onblur 类，要么切换到使用 CSS 中的 :focus 选择器，如下所示：

.form-text
{
  background-color: #FFF;
  color: #CCC;
}

#basic-search:focus
{
  color: black;
}

【讨论】：

【解决方案3】：

你想模仿HTML5 Placeholder attribute 吗？如果是这样，您可能想看看this article

【讨论】：