当包含水印时，如何让ie8文本框显示光标？

Question

我使用相对定位的跨度在透明文本框后面创建水印。这适用于我需要它的所有浏览器，包括ie7，chrome和firefox。但是在ie8中，如果直接点击水印，文本框似乎没有注册点击，光标就不会出现。

我该如何解决这个问题。

我在jsfiddle上构建了一个演示......

http://jsfiddle.net/SKeep/3nVTV/

使输入字段以外的其他内容具有焦点，然后直接单击“输入名称”，在ie8中，光标将不会出现。但是，如果在其他浏览器中工作，包括ie7，如果你点击水印前面也可以。

Answer 1

我添加了一个解决方法，为水印本身添加了一个点击功能，然后将焦点设置到文本框。

http://jsfiddle.net/SKeep/mf2ZW/

Answer 2

您所谓的“水印”通常被称为“占位符”。如果您不了解它，请查看HTML5 placeholder属性（尽管如果我记得，IE8也不支持此功能）

Relatively position your input too and use z-index property改变哪个元素“在顶部”，它应该可以正常工作。

但是，由于您可能需要使用javascript隐藏span.watermark元素，因此我建议您在输入中添加blur和focus事件并更改其样式和内容输入的值。

大多数javascripts框架都有插件，如果您使用它们，它们将为您执行此操作。或者你可以用few lines of js来完成。

如果您想远离javascript，可以在输入上使用一些背景图像，并使用IE7 / 8支持的属性选择器显示/隐藏它。

Answer 3

我想我已经修好了 http://jsfiddle.net/SKeep/mf2ZW/

有一个没有水印的输入和一个带有水印的输入，因此您可以在输入之间轻松选项卡。似乎适用于PC上所有当前的浏览器（即firefox，safari，opera）。
需要在Mac上进行一些测试。