How can I make an ie8 textbox show the cursor when it contains a watermark?

I am using a relative positioned span to create a watermark behind a transparent textbox. This works fine in all the browsers that I need it to work in including ie7, chrome and firefox. However in ie8 if you click directly on the watermark the textbox does not seem to register the click and the cursor does not appear.

How can I fix this.

I have built a demo on jsfiddle...

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

Make somthing other than the input field hav开发者_如何学编程e the focus and then click directly on 'Enter name', in ie8 and the cursor will not appear. However if works in other browsers including ie7 and it also works if you click in front of the watermark.

What you are calling a 'watermark' is more commonly referred to as a "placeholder". Look into the HTML5 placeholder attribute if you are not aware of it (although IE8 does not support this either if I remember)

Relatively position your input too and use z-index property to alter which element is "on top", and it should work fine.

But, since you will presumably need to hide your span.watermark element using javascript, I would recommend adding catching the blur and focus events on the input and altering the style and content of the input's value.

There are plugins for most javascripts frameworks that will perform this for you if you use them. Or you could do it with a few lines of js.

If you wanted to stay away from javascript, you could use a little background image on the input and show/hide it using attribute selectors which IE7/8 support.

I have added a workaround that adds a click function to the watermark itself that then sets focus to the textbox.

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

I think I've got it fixed
http://jsfiddle.net/SKeep/mf2ZW/

There is an input with no watermark and one with so you can tab easily between the inputs. seems to work on all current browsers (ie, firefox, safari, opera) on a pc.
Needs some testing on a mac.