在Firefox浏览器上隐藏占位符测试

Question

I use HTML5 placeholder attribute to label form elements.

I wish to hide the placeholder onfocus event, But in firefox it dissappears only when user starts to type.

It goes well with on all other web browsers when i use the following style

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

but not on latest version of firefox.

How to hide placeholder onfocus on firefox browser?

Answer 1

You're having jQuery option too. Try this:

var placeholderValue = "";
$('input').focus(function () {
  placeholderValue = $(this).attr('placeholder'); // save the value
  $(this).attr('placeholder', ''); // remove the value for that
}
$('input').blur(function () {
  $(this).attr('placeholder', placeholderValue); // update the value! :)
}

And do the counter for this, when there is a blur event, give it back its value!

Updated fiddle: http://jsfiddle.net/afzaal_ahmad_zeeshan/nHYhK/1/

I have tested in my Firefox :-) And it works perfect!

Answer 2

moz for use mozilla

Blockquote

input:-moz-placeholder { color:transparent; }