How do I get placeholder text in firefox and other browsers that don't support the html5 tag option?

Question

This works in Chrome and any other browser that supports placeholder text in HTML5

<input id="name" name="name"  type="text" placeholder="Please enter your name..." required /> <br />

But, it doesn't work in 3.5 and earlier of Firefox, and obviously IE8, and possibly other browsers.

How do I achieve the same thing (preferably in HTML/CSS - if not I am open to suggestions), to support all the older browsers? If not every single browser, at least Firefox and IE.

Safari and Chrome already support it (or the latest versions anyway).

Thanks.

Answer 1

One day I'll get around to properly documenting this, but see this example: http://dorward.me.uk/tmp/label-work/example.html

In short — position a <label> under a transparent <input> using <div> to provide background colour and borders.

Then use JS to determine if the label should be visible or not based on focusing.

Apply different styles when JS is not available to position the label beside the element instead.

Unlike using the value, this doesn't render the content inaccessible to devices which only display the focused content (e.g. screen readers), and also works for inputs of the password type.

Answer 2

I use this one: https://github.com/danbentley/placeholder
Lightweight and simple jQuery plugin.

Answer 3

Here is the simplest solution that I found working everywhere:

<input id="search" 
   name="search" 
   onblur="if (this.value == '') {this.value = 'PLACEHOLDER';}" 
   onfocus="if (this.value == 'PLACEHOLDER') {this.value = '';}"
/>

Replace PLACEHOLDER with your own.

At the moment, FF3 does not yet support the "placeholder" attribute of the "input" element. FF4, Opera11 and Chrome8 support it partially, i.e. they render the placeholder text in the field, but do not delete it when the user focuses in the field, which is worse that not supporting it at all.

Answer 4

I use the following snippet that I wrote with jQuery. Just add a class of textbox-auto-clear to any textbox on the page and you should be good to go.

<input type="text" value="Please enter your name" class="textbox-auto-clear" />

$(".textbox-auto-clear").each(function(){
    var origValue = $(this).val(); // Store the original value
    $(this).focus(function(){
        if($(this).val() == origValue) {
            $(this).val('');
        }
    });
    $(this).blur(function(){
        if($(this).val() == '') {
            $(this).val(origValue);
        }
    });
});

I assume that you want to keep using the placeholder attribute for HTML5 browsers, in which case you'd have to do some browser detection and only apply the jQuery solution to browsers that don't support it.

Better yet, you can us the Modernizer library, as outlined in this answer. Detecting support for specific HTML 5 features via jQuery

Answer 5

Here is a MooTools Plugin, that brings the placeholder to browsers that don't support it yet:

http://mootools.net/forge/p/form_placeholder

Answer 6

I use this one: https://github.com/Jayphen/placeholder This lightweight and simple jQuery plugin is a fork of danbentley/placeholder.

Advantage: it adds a class "placeholder" to input fields that are temporarily filled. Css ".placeholder {color:silver}" make the polyfill text look like a placeholder instead of regular input text.

Disadvantage: It doesn't polyfill the placeholder of a password field.

Answer 7

By the way...if anyone is interested...I found a nice elegant solution that is a jQuery plugin that is SOOO nice.

It literally is one line of jQuery, a minified js plugin, along with a simple class name on the input.

http://labs.thesedays.com/projects/jquery/clearfield/

It's the most beautiful thing I have discovered, next to 'Placeholder' in html.

Answer 8

The trick is to use javascript functions onBlur() and onFocus().

Here is the code that worked for me:

<script language="javascript" type="text/javascript" >

    var hint_color = "grey", field_color = null;

    var hinted = true;

    function hint() { // set the default text

        document.getElementById('mce-EMAIL').style.color = hint_color;
        document.getElementById('mce-EMAIL').value = "<?php echo SUBSCRIPTION_HINT; ?>";

        hinted = true;

    }

    function hintIfEmpty() { // set the default text, only if the field is empty

        if (document.getElementById('mce-EMAIL').value == '') hint();

    }

    function removeHint() {

        if (hinted) {

            document.getElementById('mce-EMAIL').style.color = field_color;
            document.getElementById('mce-EMAIL').value = "";

            hinted = false;

        }

    }

    function send() {

        document.getElementById('subscription_form').submit();
        hint();

    }

</script>

<div style="position:absolute; display: block; top:10; left:10; ">
<form id="subscription_form" action="<?php echo SUBSCRIPTION_LINK; ?>" method="post" target="_blank">

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" style="width: 122px;" onBlur="hintIfEmpty();" onFocus="removeHint();" required>
    <a href="javascript:send()"><font style="position: relative; top:-1px;"><b>ok</b></font></a>

</form>
</div>

<script language="javascript" type="text/javascript" >

    field_color = document.getElementById('mce-EMAIL').style.color;
    hint();

</script>

SUBSCRIPTION_HINT (i.e.: "your e-mail" ) and SUBSCRIPTION_LINK (i.e.: the value of the 'action' tag in your EN mailchimp embed code...) are PHP constants used for localization.

Answer 9

For "placeholder" work in Firefox just add the attribute

::-moz-placeholder

in CSS tags.

Answer 10

Works for me, change your CSS to

::-webkit-input-placeholder {
  color: #999;
}