Hide placeholder test onfocus on firefox browser

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?

Afzaal Ahmad Zeeshan · Accepted Answer · 2014-03-15T10:52:05.817

0

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!

edited Mar 15 '14 at 10:52

answered Mar 15 '14 at 10:40

Afzaal Ahmad Zeeshan

15,669
12
55
103

This does work, but when you focus and outfocus, the value is lost forever. That's why i am trying it with css – Jagan K Mar 15 '14 at 10:48
@JaganK there you go :) i have updated the fiddle and added code to store the value too :) – Afzaal Ahmad Zeeshan Mar 15 '14 at 10:52
I am thinking of using focusout function, do you think blur is better? – Jagan K Mar 15 '14 at 10:57
I have no perfect answer for that, yet you can get an answer from here: http://stackoverflow.com/questions/8973532/blur-vs-focusout-any-real-differences :) GOod luck! – Afzaal Ahmad Zeeshan Mar 15 '14 at 10:59

score 0 · Answer 2 · answered Mar 19 '14 at 10:33

0

moz for use mozilla

Blockquote

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

answered Mar 19 '14 at 10:33

Naresh Kumar

345
3
6

Hide placeholder test onfocus on firefox browser

2 Answers2