What is the most accurate way to emulate the “placeholder” attribute in browsers that don't support it natively?

Недавно я изучал решения jquery / javascript для имитации атрибута placeholder , но ни один из них, похоже, не понял его. Распространенные проблемы:

• Поддержка встроенного браузера не используется первой
• Форма может фактически публиковать значение текста заполнителя
• Невозможность распознать текст заполнителя и ввод пользователя, если значения идентичны (Эй , мой адрес электронной почты - 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 together 100% and put all the bad & buggy code on the net to shame.

UPDATE: Got this working with a couple mods to DA's code but it's still not perfect, mostly in regards to dynamically added input fields and existing submit() bindings. Thanks for all the help, I've decided for now that it's not worth it. I know a few people that will definitely use this though. It's a nice trick to have, but to me not worth even a 1% possibility of a form submit doing something its not intended to, or reading user input incorrectly. This minor feature is just not worth the headache, IE and pals can just deal with it, or it can be implemented on a case-by-case basis if it's really needed, like if the client demands it. @DA thanks again, this is the best implementation I've seen.

CONCLUSION: I think the only way to overcome all these issues is something like this:

• Copy the placeholder value to a new block level element
• Prepend the new element to the input
• Calculate the height border and padding of the input and move the new element over it as close as possible to the position that text would occur
• Use the standard blur/change/focus events to hide the element when the input has a value or is focused

This way you don't have to do anything on submit or deal with any of the other issues that can occur. Sorry no demo yet, I've got to get back to work - but I'll save a final edit for when this comes together.