CODEWITHSUNDEEP
jqueryhtml
Jake
Jake

Reputation: 205

Placeholder doesn't work on Internet Explorer

You might think that this question is already answered.

However, I couldn't find the right code to make this happen for a week.

Jquery website doesn't support to users to download their placeholder file on the browser.

  1. Placeholder should work on IE 7 and IE 8.
  2. It will be great if I can use Jquery.
  3. when a user clicks the input box, I hope it doesn't disappear until the user actually start to type a value.
  4. It should work on password input too. (Password word box should show 'Password')

Can you help me out to figure out this problem?

It will be good for new users to find fresh answer.

Upvotes: 2

Views: 3738

Answers (3)

Christian Noack
Christian Noack

Reputation: 21

For me the following works perfectly to get placeholder function working in IE8:

This is the HTML: 

<input id="user_userid" name="user_userid" placeholder="User-ID" type="text" value="" />

This is the Coffeescript code:

$(document).ready -> 

  if (document.all && !document.addEventListener) 
    $('input[placeholder]').each  ->     
      input = $(this) 
      input.closest('form').submit -> 
        if (input.val() == input.attr('placeholder')) 
          input.val('')

The line "... document:addEventListener ..." checks for IE8 or earlier. With this code the placeholder handling happens when the containing form is submitted.

Best regards,

Christian http://www.agile-methoden.de

Upvotes: 0

miguelr
miguelr

Reputation: 1344

I recommend the In-Field Labels jQuery Plugin

http://fuelyourcoding.com/scripts/infield/

I combined it with http://modernizr.com/ to check if placeholders are supported:

if (!Modernizr.input.placeholder) {
  $("input, textarea").inFieldLabels();
}

Upvotes: 1

Dav
Dav

Reputation: 330

You can use

 $(function() {

    if(!$.support.placeholder) { 

        var active = document.activeElement;

        $(':text').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');

            }

        });

        $(':text').blur();

        $(active).focus();

        $('form').submit(function () {

            $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });

        });

    }

});

In CSS add:

.hasPlaceholder {
    color: #777;
}

Upvotes: 8

Related Questions