搜索框文本 - 显示隐藏功能

Question

在 Chris Coyer 的 site 上，他使用了一个不错的小搜索框。我很想知道您是如何让搜索框中的文本在您单击框外时消失并重新出现的。

感谢这个论坛上的一位乐于助人的人，我使用以下方法在我单击框时使文本消失：

<input type="text" value="Search" onfocus="if (this.value=='Search') this.value='';"/>

此外，在 Safari 中，当我单击输入字段时，输入字段周围会出现令人讨厌的边框。摆脱它的代码是什么？

谢谢！

Answer 1

要重置搜索文本，请添加 onblur：

onblur="if (this.value=='') this.value='Search';"

所以你的输入框变成：

<input type="text" value="Search" onfocus="if (this.value=='Search') this.value='';" onblur="if (this.value=='') this.value='Search';"/>

另外，对于 Safari 边框，在你的 css 中添加这个：

input[type=text]:focus,
input[type=password]:focus {
    outline: 0 none;
}

Answer 2

如果你使用 defaultValue 属性，你可以摆脱静态值重复

比较一下

<input type="text" value="Search" onblur="if ('' == this.value) this.value = 'Search';" onfocus="if ('Search' == this.value) this.value='';"/>

其中有 statc 字符串“Search”的三个实例，到 this

<input type="text" value="Search" onblur="if ('' == this.value) this.value = this.defaultValue;" onfocus="if (this.defaultValue == this.value) this.value='';"/>

只有一个。

但如果你真的想把它提升到“下一个层次”，你可以实现像几乎规范的labels.js 这样的东西。代码现在真的很老了，是在 2002 年编写的（我认为），但是这个概念是合理的，它的基本概念已经被 modern frameworks 很好地使用了。

Answer 3

我不相信您可以在 Safari 中移除边框，尽管可以进行更正。

要让文本在您点击搜索框之外再次出现，您可以使用以下命令：

<input onblur="if (this.value == '') this.value ='Search';" />