Javascript placeholder for IE8 is not working

Question

I'm trying to give placeholder workaround for IE7, IE8, and IE9. From the codes on the internet, I found the javascript, and I try to test it using simple page like this:

<html>
<HEAD>
<script type="text/javascript">
$('[placeholder]').focus(function() {
  var input = $(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur().parents('form').submit(function() {
  $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }
  })
});
</script>
</head>
<body>
<form>
<input class="placeholder" type="text" name="nama" placeholder="try"> 
</form>
</body>
</html>

which I hoped will show an input with placeholder text "try" inside on IE 8. but it's not showing anything. I've tried anything I can try outside the javascript code, like erasing the class attribute, adding complete attribute to the form tag, and else. but the placeholder still seems not shown. can you help me what's wrong with this code? I'm still new with javascript and web programming, so maybe the mistake is not immediately apparent to me.

I got the code from https://gist.github.com/hagenburger/379601

Thank you for all people that has marked this question as duplicate, but it turns out that what I needed is not in the "This question already has an answer here:" part, or elsewhere. Just only two person that really helps, and the solution I needed and working for me is actually just as simple as someone (HaukurHaf) pointed me out: "your script is running too early!" I think it's easier than tagging my question as duplicate, where I can't find any "duplicate" question that has the answer I need. — Chen Li Yong, Dec 03 '13 at 02:30

score 2 · Accepted Answer · answered Dec 02 '13 at 08:39

Your script is running to early. You need to use the document ready event to launch the script, or move it to the bottom of the page. I prefer the document ready event. See below:

<script type="text/javascript">
$(function() {
$('[placeholder]').focus(function() {
  var input = $(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur().parents('form').submit(function() {
  $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }
  })
});
});
</script>

score 1 · Answer 2 · answered Dec 02 '13 at 08:41

Just copy this code and save it as placeholder.js.

(function( $ ){

   $.fn.placeHolder = function() {  
      var input = this;
      var text = input.attr('placeholder');  // make sure you have your placeholder attributes completed for each input field
      if (text) input.val(text).css({ color:'grey' });
      input.focus(function(){  
         if (input.val() === text) input.css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){     
            input.val("").css({ color:'black' });  
         });
      });
      input.blur(function(){ 
         if (input.val() == "" || input.val() === text) input.val(text).css({ color:'grey' }); 
      }); 
      input.keyup(function(){ 
        if (input.val() == "") input.val(text).css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
            input.val("").css({ color:'black' });
        });               
      });
      input.mouseup(function(){
        if (input.val() === text) input.selectRange(0,0); 
      });   
   };

   $.fn.selectRange = function(start, end) {
      return this.each(function() {
        if (this.setSelectionRange) { this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true); 
            range.moveEnd('character', end); 
            range.moveStart('character', start); 
            range.select(); 
        }
      });
   };

})( jQuery );

To use on just one input

$('#myinput').placeHolder();  // just one

This is how I recommend you implement it on all input fields on your site when the browser does not support HTML5 placeholder attributes:

var placeholder = 'placeholder' in document.createElement('input');  
if (!placeholder) {      
  $.getScript("../js/placeholder.js", function() {   
      $(":input").each(function(){   // this will work for all input fields
        $(this).placeHolder();
      });
  });
}

Javascript placeholder for IE8 is not working

2 Answers2