-1

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)

DannyD
  • 2,732
  • 16
  • 51
  • 73
  • IE10 supports the placeholder attribute. In downlevel versions, you need to use a shim like falinsky suggests. – EricLaw Jul 26 '13 at 22:18

3 Answers3

2
// 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

Kamran Ahmed
  • 11,809
  • 23
  • 69
  • 101
1

Please check out jquery-html5-placeholder-shim

falinsky
  • 7,229
  • 3
  • 32
  • 56
  • 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
0
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('');
            }
        });
    });
}