Question

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

<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中的'title'字段可以正常工作。我希望我的boc以同样的方式工作。

Answer 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>

Answer 2

当用户点击它时，您正在将“聚焦”类添加到输入字段，但该类永远不会被删除。您需要删除类onblur，或切换到使用CSS中的:focus选择器，如下所示：

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

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

Answer 3

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

输入框和css改变颜色

3 个答案: