Placeholder doesn't disappear upon focus in Chrome

Question

I have created an input according to the code below.

<div>
  <form id="me" runat="server">
  <input id="stuff" type="text" placeholder="Type here" runat="server" />
  </form>
</div>

As expected, when i start typing, the placeholder text disappears. That works as supposed to in the Burning Cat browser but not in the Shiny Metal browser. What causes it (styles, server tag, other stuff...)? What can be done about it?

Answer 1

I came across the same problem today and I came up with a pure-CSS solution hack:

input:focus::-webkit-input-placeholder {
    color: transparent;
}

Answer 2

Firefox and chrome(and safari) act different on HTML5 placeholders. If you want chrome to disappear the placeholders on focus, you can use following script:

$('input:text, textarea').each(function(){
    var $this = $(this);
    $this.data('placeholder', $this.attr('placeholder'))
         .focus(function(){$this.removeAttr('placeholder');})
         .blur(function(){$this.attr('placeholder', $this.data('placeholder'));});
});