HTML5 placeholder disappears on focus

Question

Is there a freely available jQuery plugin that changes placeholder behavior to match HTML5 spec?

Before Focus

Answer 1

I wrote my own css3 only solution. See if that fullfills all your needs.

http://codepen.io/fabiandarga/pen/MayNWm

This is my solution:

1. the input element is set to "required"
2. an aditional span element for the placeholder is needed. This element is moved on top of the input element (position: absolute;)
3. with css selectors the input element is tested for validity (required fields are invalid as long as there is no input) and the placeholder is then hidden.

Pitfall: The placeholder is blocking mouseevents to the input! This problem is circumvented by hiding the placeholder element when the mouse is inside the parent (wrapper).

  
  Hier text


.placeholder {
  display: none;
  position: absolute;
  left: 0px;
  right: 0;
  top: 0px;
  color: #A1A1A1;
}
input:invalid + .placeholder {
  display: block;  /* show the placeholder as long as the "required" field is empty */
}
.wrapper:hover .placeholder {
  display: none; /* required to guarantee the input is clickable */
}

.wrapper{
  position: relative;
  display: inline-block;
}