html - Apple Store 的输入框如何防止用户点击被视为点击提示短语的搜索框？

Question

我可以用不同的方式在输入框中输入提示短语，但我喜欢提示短语即使在光标闪烁时也保持不变的方式，所以它是这样的:

网址是http://store.apple.com/us

在页面的右上角，有一个搜索框，提示短语是<span>。 ，即 position: absolute在容器中。

容器中还有 <input>元素，带有 position: static

所以提示span被强加在 input 之上, 具有当前效果。

但是我不明白的是，当用户点击提示词组span时, 不会点击 <span> ？所以 <input>不会获得焦点，并且不会有光标闪烁，用户无法在框中键入。这是如何克服的？

我不认为使用 Javascript 来处理这个问题，因为如果用户禁用了 Javascript 怎么办？ Apple Store 的网站还有一个效果，在禁用Javascript 的情况下，如果点击提示短语span，提示短语span 就会消失——这是怎么做到的？我猜这是由一些 CSS 完成的 :focus伪类或者其他一些方式。

如果你想玩的话，这是一个 JSFiddle:http://jsfiddle.net/hndWc/6/

更新:请不要使用 Javascript 使输入框获得焦点，就像禁用 Javascript 的 Apple Store 一样，它仍然可以使输入框获得焦点。

Answer 1

我稍微更新了你的 fiddle 来展示一个粗略的例子:http://jsfiddle.net/hndWc/8/

$('#prompt-text').click(function(){
    $('#prompt-text').hide();  
    $('#input-element').focus();
});

当然这还不完整。我会输入一些代码来查看输入或跨度是否​​具有焦点，以便我们也可以捕获键盘导航内容。不仅仅是点击。

编辑

Apple 可能没有分层功能。仔细一看，他们正在使用 HTML5。他们正在使用输入元素的 placeholder 属性

http://davidwalsh.name/html5-placeholder