如何使ie8 textbox在包含水印时显示光标？

Question

我使用相对定位跨度在透明文本框后面创建水印。这在我需要它工作的所有浏览器中都工作得很好，包括ie7，chrome和火狐。但是，在ie8中，如果您直接单击水印，文本框似乎不会注册单击，光标也不会出现。

我怎么才能解决这个问题。

我已经在jsfiddle上构建了一个演示。

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

在ie8中，将输入字段之外的其他内容作为焦点，然后直接点击“Enter name”，光标就不会出现。但是，如果在包括ie7在内的其他浏览器中工作，并且如果您在水印前单击，它也可以工作。

Answer 1

你所说的“水印”通常被称为“占位符”。如果您不知道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 2

我已经添加了一个变通方法，将单击功能添加到水印本身，然后将焦点设置到文本框中。

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

Answer 3

我想我已经修好了

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

有一个没有水印的输入和一个有水印的输入，这样你就可以很容易地在输入之间切换。似乎适用于pc上所有当前的浏览器(如firefox、safari、opera)。

需要在mac上进行一些测试。