HTML input placeholder text does not show in firefox

I have the following input field

<input type="text" id="search-box" placeholder="input the name" />

the placeholder text sets the default value of the field which is "input the name". If you click the field the text disappears so开发者_开发问答 that you can type the name in the field.

the placeholder text is shown in Chrome but not in Firefox, how to fix this firefox problem?? (I am using firefox 3.6)

placeholder is a HTML5 attribute that isn't supported in Firefox 3.6

It is supported in Firefox 4.0 and above: https://developer.mozilla.org/en/CSS/%3A-moz-placeholder

I believe the placeholder attribute is WebKit-only (Safari and Chrome). Please see this link for how to make it work in the rest of browsers.

This is how it works in search box of stackoverflow:

<input name="q" class="textbox" tabindex="1" onfocus="if (this.value=='search') this.value = ''" type="text" maxlength="140" size="28" value="search">

but what they missed out on is:

onblur="if(this.value.length==0){this.value='search';}"

all much better in focus and blur events added to inputs rather than inline

Firefox does not support that future yet:

http://www.javaworld.com/community/node/6224

You can backport it by adding a jquery plugin to your page which will emulate it:

http://plugins.jquery.com/project/placeholder-html5