javascript - 为什么要使用额外的输入元素来创建内部网站搜索框(和)

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=''" 在用户点击后清除“Search www.example.com”的文本/值.为什么这不起作用，我怀疑是因为人们不能通过“定位”某些“属性”。 CSS 并且没有针对给定 HTML 属性的“替代”CSS 属性。

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

以上将失败，因为我不能(或者我可以？)定位 value 属性!但是，将 Javascript 用于像这样的非常小的功能似乎有点矫枉过正。几乎就像使用 JS 实现悬停效果而不是 CSS pseudo:hover。

Answer 1

Why am I using, or need to use the extra input element with the attribute of hidden to make a web site search box that searches the given web site internally.

您必须以某种方式告诉搜索引擎您要将搜索限制在特定站点。通常这是通过一个隐藏的输入字段完成的，因为它在提交表单时包含但不显示给用户。

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

do I really need to use Javascript onfocus="this.value=''" to clear the text/value of "Search www.example.com" once the user has clicked on it.

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

But it just seems an overkill to use Javascript for a very small functionality like this one. Almost like using JS for hover effects rather than CSS pseudo:hover.

您可能认为这是矫枉过正，但多年来这是唯一的方法。早在 CSS 实现之前，JavaScript 就已经出现在浏览器中。悬停效果必须在 javascript 中实现，因为 :hover 直到 CSS2 才被引入。您要在本例中使用的占位符效果最近才通过 HTML5 实现。