Question

为什么我使用或需要使用隐藏属性的额外输入元素来创建一个在内部搜索给定网站的网站搜索框。

<div id="search_box">
<form name="searchform" action="http://www.google.com/search" method="get" target="_blank">
<input name="sitesearch" type="hidden" value="www.example.com" />
<input name="as_q" onfocus="this.value=''" type="text" size="20" value="Search www.example.com" title="Enter your search here" />
<input title="Begin Search" type="submit" value="Search" />
</form>
</div>

另外，当用户点击它时，我真的需要使用Javascript onfocus="this.value=''"来清除“搜索www.example.com”的文本/值。为什么这不起作用我怀疑是因为人们不能通过“目标”某些“属性”。 CSS并没有给定HTML属性的“替代”CSS属性。

input[type="text"]:focus
{
value: "";
}

上面会失败，因为我不能（或者我可以？）定位值属性！但是，将Javascript用于像这样的非常小的功能似乎有点过分。几乎就像使用JS来悬停效果而不是CSS伪：悬停。

Answer 1

为什么我使用或需要使用额外的输入元素隐藏的属性，使搜索的网站搜索框在内部给出了网站。

不知何故，您必须告诉搜索引擎您要将搜索限制在特定网站上。通常这是通过隐藏的输入字段完成的，因为在提交表单但不向用户显示时会包含该字段。

然而，它不需要是隐藏元素。您也可以将其放在text，radiobutton，checkbox或select中。唯一的要求是它被发送到名为“sitesearch”的搜索引擎，并带有您选择的网站的值。

我真的需要使用Javascript onfocus =“this.value =''”来清除用户点击后“搜索www.example.com”的文本/值在它上面。

您可以从头开始设置value=''并使用新的html5属性placeholder='Search www.example.com'。或者在页面的某处使用描述性文字。

但是，使用Javascript非常小，这似乎有些过分像这样的功能。几乎就像使用JS来悬停效果一样而不是CSS伪：悬停。

你可能会认为它有点矫枉过正，但多年来它是唯一的方法。在CSS实现之前，Javascript已经存在于浏览器中。悬停效果必须在javascript中实现，因为在CSS2之前不会引入:hover。在这种情况下，您想要使用的占位符效果最近才使用HTML5实现。

Answer 2

此处sitesearch是传递给谷歌的查询参数，告知谷歌搜索特定网站，因此需要此属性，对于javascript代码， ~~我认为您可以通过css3的content属性执行相同的操作，该属性可以在现代浏览器中使用。~~

编辑：我尝试使用content，但似乎无效

为什么使用额外的输入元素来创建内部网站搜索框（和）

2 个答案: