My application is in need of placeholders for a text field and a textarea field. I know Internet Explorer doesn't support placeholders. I was looking around and I found some fallback code which is working great only for the text field. How can I get this working for the textarea also.

Code:

jQuery(function() {
    jQuery.support.placeholder = false;
    test = document.createElement('input');
    if('placeholder' in test) jQuery.support.placeholder = true;
});

$(function() {
    if(!$.support.placeholder) { 
        var active = document.activeElement;
        $('input[type=text], textarea').focus(function () {
            if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                $(this).val('').removeClass('hasPlaceholder');
            }
        }).blur(function () {
            if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
            }
        });
        $('input[type="text"], textarea').blur();
        $(active).focus();
        $('form').submit(function () {
            $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
        });
    }
});

HTML:

                <li>
                    <input type="text" placeholder="To:" id="to" autocapitalize="off" autocorrect="off" autoplete="off" />
                </li>
                <li>
                    <textarea placeholder="Message:" id="body" rows="10" cols="30" autocapitalize="off" autocorrect="off" autoplete="off"></textarea>
                </li>

My application is in need of placeholders for a text field and a textarea field. I know Internet Explorer doesn't support placeholders. I was looking around and I found some fallback code which is working great only for the text field. How can I get this working for the textarea also.

Code:

jQuery(function() {
    jQuery.support.placeholder = false;
    test = document.createElement('input');
    if('placeholder' in test) jQuery.support.placeholder = true;
});

$(function() {
    if(!$.support.placeholder) { 
        var active = document.activeElement;
        $('input[type=text], textarea').focus(function () {
            if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                $(this).val('').removeClass('hasPlaceholder');
            }
        }).blur(function () {
            if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
            }
        });
        $('input[type="text"], textarea').blur();
        $(active).focus();
        $('form').submit(function () {
            $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
        });
    }
});

HTML:

                <li>
                    <input type="text" placeholder="To:" id="to" autocapitalize="off" autocorrect="off" autoplete="off" />
                </li>
                <li>
                    <textarea placeholder="Message:" id="body" rows="10" cols="30" autocapitalize="off" autocorrect="off" autoplete="off"></textarea>
                </li>

• javascript
• jquery
• html

• 2 NITPICK: Do not use placeholder as a label replacement. – epascarello Commented Jul 31, 2012 at 20:36

4 Answers 4

Change $(':text') to $('input[type="text"], textarea')

Alternatively, this existing jQuery plugin:

https://github./mathiasbynens/jquery-placeholder

works on textareas and many types of input fields, including password fields

<script type="text/javascript">
 $(function() {
    if(!$.support.placeholder) { 
        var active = document.activeElement;
        $('input[type="text"], textarea').focus(function () {
            if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                $(this).val('').removeClass('hasPlaceholder');
            }
        }).blur(function () {
            if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
            }
        });
        $('input[type="text"], textarea').blur();
        $(active).focus();
        $('form').submit(function () {
            $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
        });
    }
});
</script>

It is using a text selector, change it to also use textarea.

$(':text')

should be

$(':text, textarea')

or for better performance use

$('input[type=text], textarea')

It looks like you would need to replace :text with :text,textarea.