使用 Google 自定义搜索清除输入 onFocus答案

【问题标题】：Clear Input onFocus with Google Custom Search使用 Google 自定义搜索清除输入 onFocus
【发布时间】：2011-02-22 00:28:01
【问题描述】：

我正在将网站搜索转移到谷歌自定义搜索。

文本的旧输入如下所示：

<input type="text" value="Search this website..." name="s" id="searchbox" onfocus="if (this.value == 'Search this website...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website...';}" />

现在我需要将 attr 'name' 设为 'q'，如下所示：

<input type="text" value="Search this website..." name="q" id="searchbox" onfocus="if (this.value == 'Search this website...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website...';}" />

奇怪的是，当我将名称换成 q 时，我无法清除焦点上的搜索框。我错过了一些超级简单的东西吗？

【问题讨论】：

标签： javascript google-search

【解决方案1】：

我不知道为什么会发生这种情况，但我建议您不要使用 JavaScript 来执行此操作，而让 HTML 使用 placeholder 属性来完成它的工作：

<input type="text" placeholder="Search this website..." name="q" id="searchbox" />

【讨论】：

哈哈，我希望全世界都会：|
您还需要一个 HTML5 文档类型。请参阅我在 stackoverflow.com/questions/2984311/… 的帖子，有趣的是，它比接受的答案高了 3。在那之后，回答者改变了他的答案以支持我的答案——这对于信息保存来说很糟糕，但是一个很好的姿态。

【解决方案2】：

您是否还包括 CSE JS？它可能会覆盖您的焦点和模糊处理程序。 default implementation（见页面顶部）添加了谷歌品牌的水印。

你可以在没有他们的 JS 的情况下实现 CSE，在这种情况下你的代码可以正常工作：

<form action="http://www.google.com/cse" id="cse-search-box">
    <input name="cx" type="hidden" value="yoursearchid" />
    <input name="ie" type="hidden" value="UTF-8" />
    <input name="q" type="text" value="Search this website..." onfocus="if (this.value == 'Search this website...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website...';}" />
    <input name="sa" type="submit" value="Search" />
</form>

【讨论】：