Recently I have been looking at jquery/javascript solutions to emulating the placeholder attribute, but none of them seem to have it right. Common issues are:
- Native browser support is not used first
- The form may actually post the value of the placeholder text
- Inability to recognize between placeholder text and user input if the values are identical (Hey, my email IS user@example.com!! Why won't it submit? Hey I wanted to search for the string "Search" but it won't let me!)
- Difficult to style or distinguish between regular text and placeholder text
- Obtrusive implementation (almost always. I don't want to add 2 divs per input and a stylesheet to do this)
- Just doesn't work. At least 2 of those on the jQuery website.
I have played around a bit trying to get this to work properly (taking a few hints from some of the code I have seen already), but it still needs work. Particularly, the form may post the value of the placeholder. Comments and mods to the jsfiddle are welcome. (Note: Demo must be viewed in a browser without placeholder support) Most code I've seen takes the value of the placeholder and stuffs it into the input itself which leads to this problem, I feel like there must be a better way.
Is there a nice clean solution that actually works?
EDIT: I want to stress this: it should behave the way you see it in browsers that natively support it as much as possible, and be as unobtrusive as possible, as demonstrated in my current code, which does not require anything other than including the script and using the placeholder as you normally would for browsers that support it.
UPDATE: @DA's current solution is a couple of bug fixes away from perfect (see comments), would love to see this come toge