Is there a js function I could use that would make the placeholder attribute work in IE?

Question

Right now I have a bunch of input tags in my project that use a placeholder, like this:

<input id="Name" name="Name" placeholder="Name Goes Here" type="text" value="">

Is there a js function that I could place in my global js script that would change the input tag if the browser is IE?

For example, if the browser was internet explorer, I could run a specific javascript function that would change ALL my placeholders to something that IE uses (if that even exists)

IE10 supports the placeholder attribute. In downlevel versions, you need to use a shim like falinsky suggests. — EricLaw, Jul 26 '13 at 22:18

Kamran Ahmed · Answer 1 · 2013-07-27T07:53:04.067

// Detect the browser, as you want. I'm using the follwowing way
var browserName=navigator.appName; 
if (browserName=="Microsoft Internet Explorer") 
{ 
    replacePlHolders();
}


// replace all the placeholders with a simple text input
function replacePlHolders()
{
   var plInps = $("input[placeholder]");

   plInps.each(function(){
        var name=$(this).attr("name");
        var newInput = $("<input type='text' name='"+name+"' value='"+name+" goes here'>");

         $(this).replaceWith(newInput);
         var defaultValue = name + " goes here";

         newInput.on('focus', function() {                 

                    // If this value of the input equals our sample,
                    // hide it when the user clicks on it.

                    if(this.value === defaultValue)
                       this.value = '';
              });

              newInput.on('blur', function() {
                    // When they click off of the input, if
                    // the value is blank, bring back the sample.
                    if(this.value === '')
                         this.value = defaultValue;
               });
   });
}

Place this code in your global Javascript file and this will do the magic for you.

Check the fiddle here

score 1 · Answer 2 · answered Jul 26 '13 at 22:17

1

Please check out jquery-html5-placeholder-shim

answered Jul 26 '13 at 22:17

falinsky

6,722
3
30
53

that worked perfectly. – DannyD Jul 26 '13 at 22:29
I used the plugin you gave me and it works. However, when I navigate to a different page it stops working. Is there a way I can have this plugin run for each page I hit? thanks – DannyD Jul 26 '13 at 23:07
you should include this plugin on each page... – falinsky Jul 27 '13 at 00:41

score 0 · Answer 3 · answered Jul 27 '13 at 06:16

if(!Modernizr.input.placeholder){
    $('[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();
    $('[placeholder]').parents('form').submit(function(){
        $(this).find('[placeholder]').each(function(){
            var input = $(this);
            if(input.val() == input.attr('placeholder')){
                input.val('');
            }
        });
    });
}

Is there a js function I could use that would make the placeholder attribute work in IE?

3 Answers3