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”实例，到此

<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';" />

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

3 个答案: