132

I have a small issue, the placeholder attribute for input boxes is not supported in IE 8-9.

What is the best way to make this support in my project (ASP Net). I am using jQuery. Need I use some other external tools for it?

Is http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html a good solution?

8
  • 7
    Pedant's corner: it's an attribute, not a tag. A tag has pointy brackets around it (like <input>); an attribute is a key-value pair inside the pointy-brackets (like placeholder="This is an attribute value"). Leaving the question as-is, so that future people who ask the same question can find it. Feb 22, 2013 at 9:40
  • 2
    That link didn't work as-is. I removed the extra quotes around the $("[placeholder]") selector and it was fine.
    – claptimes
    Sep 11, 2013 at 19:59
  • 1
    The solution in that link also does not handle password boxes as per native support in webkit
    – geedubb
    Sep 26, 2013 at 13:24
  • 1
    The link you gave works very well indeed - apart from passwords it works a treat and couldn't be simpler to setup
    – hobailey
    Nov 15, 2013 at 12:12
  • 1
    the link is not working with IE9 by the demo given in same site. Jul 17, 2014 at 11:20

14 Answers 14

89

You could use this jQuery plugin: https://github.com/mathiasbynens/jquery-placeholder

But your link seems to be also a good solution.

5
  • 2
    The link suggested in the question didn't work for me; it had problems with form submit. The solution you have suggested in this answer seems a lot more robust and worked a treat. Sep 11, 2013 at 19:03
  • Actually I tried this one and is works fine - but as soon as I'm loading a lightbox with a form and a password field, everything works but not the password field - it's just empty.
    – Jurik
    Sep 27, 2013 at 8:43
  • 6
    in my IE8 password placeholder is in dots Nov 27, 2014 at 13:59
  • I also can't see it in ie8. I worked around it by just having some text show above the fields when in ie8.
    – jhawes
    Sep 10, 2015 at 17:46
  • jQuery-placeholder behaves differently. It removes the placeholder on focus instead of when the user begins typing something on the field like the normal behavior in Firefox for placeholders. Feb 28, 2017 at 8:59
89

You can use any one of these polyfills:

These scripts will add support for the placeholder attribute in browsers that do not support it, and they do not require jQuery!

12
  • 4
    I upvoted this because I love the idea of a non-jquery solution, but right now this code has problems in IE8 so it's not suitable for me. github.com/jamesallardice/Placeholders.js/issues/17
    – Dan Searle
    Jun 28, 2013 at 11:04
  • 3
    This solution does not handle password boxes
    – Jurik
    Sep 26, 2013 at 16:22
  • 2
    @Jurik I have added an extra polyfill - I hope it helps. Sep 26, 2013 at 18:37
  • 1
    Even the distributor of this plugin says that this plugin doesn't handle password fields in <IE9 github.com/jamesallardice/Placeholders.js/issues/…
    – Jurik
    Sep 27, 2013 at 8:57
  • The password field still doesn't work in iE8. The accepted answer link seems to work in ie8 for password field.
    – Susie
    Dec 16, 2013 at 19:31
24

the $.Browser.msie is not on the latest JQuery anymore... you have to use the $.support

like below:

 <script>

     (function ($) {
         $.support.placeholder = ('placeholder' in document.createElement('input'));
     })(jQuery);


     //fix for IE7 and IE8
     $(function () {
         if (!$.support.placeholder) {
             $("[placeholder]").focus(function () {
                 if ($(this).val() == $(this).attr("placeholder")) $(this).val("");
             }).blur(function () {
                 if ($(this).val() == "") $(this).val($(this).attr("placeholder"));
             }).blur();

             $("[placeholder]").parents("form").submit(function () {
                 $(this).find('[placeholder]').each(function() {
                     if ($(this).val() == $(this).attr("placeholder")) {
                         $(this).val("");
                     }
                 });
             });
         }
     });
 </script>
3
  • 2
    this works like a charm, I like it better than adding plugins, thanks alot
    – LemonCool
    May 7, 2014 at 16:57
  • @vsync no if you read well I said plugins, plural, most of options I've found you need to use multiple files, with tons of code, vs few line. aren't you a bit arrogant, and how doe that comment improve the answer
    – LemonCool
    May 25, 2014 at 16:06
  • This shouldn't really be used. This is for jQuery internal use and could be removed at any time. api.jquery.com/category/deprecated/deprecated-1.9
    – Will
    Jan 13, 2015 at 9:27
3

if you use jquery you can do like this. from this site Placeholder with Jquery

$('[placeholder]').parents('form').submit(function() {
  $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }
  })
});

these are the alternate links

  1. Placeholder jquery library
  2. HTML5 polyfills -- go for placeholder section
3
  • 3
    This answer works, but you need to follow the link for the complete functionality. The code here alone won't work.
    – Hawkee
    Oct 7, 2013 at 14:37
  • 1
    ofc it won't work, this is a ridicules code! why do you bind again and again the same "form" for the submit event? what does the submit event has to do with anything
    – vsync
    May 25, 2014 at 14:20
  • what will happen , if I type same text as in placeholder text in IE8 ???
    – Bimal Das
    Mar 27, 2017 at 9:22
3

I had compatibility issues with several plugins I tried, this seems to me to be the simplest way of supporting placeholders on text inputs:

function placeholders(){
    //On Focus
    $(":text").focus(function(){
        //Check to see if the user has modified the input, if not then remove the placeholder text
        if($(this).val() == $(this).attr("placeholder")){
            $(this).val("");
        }
    });

    //On Blur
    $(":text").blur(function(){
        //Check to see if the use has modified the input, if not then populate the placeholder back into the input
        if( $(this).val() == ""){
            $(this).val($(this).attr("placeholder"));
        }
    });
}
1
  • is it supporting for IE9 ?
    – Viku
    Mar 24, 2015 at 5:49
2
$(function(){    
    if($.browser.msie && $.browser.version <= 9){
        $("[placeholder]").focus(function(){
            if($(this).val()==$(this).attr("placeholder")) $(this).val("");
        }).blur(function(){
            if($(this).val()=="") $(this).val($(this).attr("placeholder"));
        }).blur();

        $("[placeholder]").parents("form").submit(function() {
            $(this).find('[placeholder]').each(function() {
                if ($(this).val() == $(this).attr("placeholder")) {
                    $(this).val("");
                }
            })
        });
    }
});

try this

1

I use thisone, it's only Javascript.

I simply have an input element with a value, and when the user clicks on the input element, it changes it to an input element without a value.

You can easily change the color of the text using CSS. The color of the placeholder is the color in the id #IEinput, and the color your typed text will be is the color in the id #email. Don't use getElementsByClassName, because the versions of IE that don't support a placeholder, don't support getElementsByClassName either!

You can use a placeholder in a password input by setting the type of the original password input to text.

Tinker: http://tinker.io/4f7c5/1 - JSfiddle servers are down!

*sorry for my bad english

JAVASCRIPT

function removeValue() {
    document.getElementById('mailcontainer')
        .innerHTML = "<input id=\"email\" type=\"text\" name=\"mail\">";
    document.getElementById('email').focus(); }

HTML

<span id="mailcontainer">
    <input id="IEinput" onfocus="removeValue()" type="text" name="mail" value="mail">
</span>
1
  • 3
    Placeholder should come back if field is empty and focus is lost Jul 3, 2013 at 13:06
1

For others landing here. This is what worked for me:

//jquery polyfill for showing place holders in IE9
$('[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('');
        }
    })
});

Just add this in you script.js file. Courtesy of http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

0

Since most solutions uses jQuery or are not this satisfying as I wished it to be I wrote a snippet for myself for mootools.

function fix_placeholder(container){
    if(container == null) container = document.body;

    if(!('placeholder' in document.createElement('input'))){

        var inputs = container.getElements('input');
        Array.each(inputs, function(input){

            var type = input.get('type');

            if(type == 'text' || type == 'password'){

                var placeholder = input.get('placeholder');
                input.set('value', placeholder);
                input.addClass('__placeholder');

                if(!input.hasEvent('focus', placeholder_focus)){
                    input.addEvent('focus', placeholder_focus);
                }

                if(!input.hasEvent('blur', placeholder_blur)){
                    input.addEvent('blur', placeholder_blur);
                }

            }

        });

    }
}

function placeholder_focus(){

    var input = $(this);    

    if(input.get('class').contains('__placeholder') || input.get('value') == ''){
        input.removeClass('__placeholder');
        input.set('value', '');
    }

}

function placeholder_blur(){

    var input = $(this);    

    if(input.get('value') == ''){
        input.addClass('__placeholder');
        input.set('value', input.get('placeholder'));
    }

}

I confess that it looks a bit more MORE than others but it works fine. __placeholder is a ccs-class to make the color of the placeholder text fancy.

I used the fix_placeholder in window.addEvent('domready', ... and for any additinally added code like popups.

Hope you like it.

Kind regards.

0

I used the code of this link http://dipaksblogonline.blogspot.com/2012/02/html5-placeholder-in-ie7-and-ie8-fixed.html

But in browser detection I used:

if (navigator.userAgent.indexOf('MSIE') > -1) {
 //Your placeholder support code here...
}
0
<input type="text" name="Name" value="Name" onfocus="this.value = ''" onblur=" if(this.value = '') { value = 'Name'}" />
0

Add the below code and it will be done.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="https://code.google.com/p/jquery-placeholder-js/source/browse/trunk/jquery.placeholder.1.3.min.js?r=6"></script>
    <script type="text/javascript">
        // Mock client code for testing purpose
        $(function(){
            // Client should be able to add another change event to the textfield
            $("input[name='input1']").blur(function(){ alert("Custom event triggered."); });    
            // Client should be able to set the field's styles, without affecting place holder
            $("textarea[name='input4']").css("color", "red");

            // Initialize placeholder
            $.Placeholder.init();

            // or try initialize with parameter
            //$.Placeholder.init({ color : 'rgb(255, 255, 0)' });

            // call this before form submit if you are submitting by JS
            //$.Placeholder.cleanBeforeSubmit();
        });
    </script>

Download the full code and demo from https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip

0
0

Here is a javascript function that will create placeholders for IE 8 and below and it works for passwords as well:

/* Function to add placeholders to form elements on IE 8 and below */
function add_placeholders(fm) {	
	for (var e = 0; e < document.fm.elements.length; e++) {
		if (fm.elements[e].placeholder != undefined &&
		document.createElement("input").placeholder == undefined) { // IE 8 and below					
			fm.elements[e].style.background = "transparent";
			var el = document.createElement("span");
			el.innerHTML = fm.elements[e].placeholder;
			el.style.position = "absolute";
			el.style.padding = "2px;";
			el.style.zIndex = "-1";
			el.style.color = "#999999";
			fm.elements[e].parentNode.insertBefore(el, fm.elements[e]);
			fm.elements[e].onfocus = function() {
					this.style.background = "yellow";	
			}
			fm.elements[e].onblur = function() {
				if (this.value == "") this.style.background = "transparent";
				else this.style.background = "white";	
			}		
		} 
	}
}

add_placeholders(document.getElementById('fm'))
<form id="fm">
  <input type="text" name="email" placeholder="Email">
  <input type="password" name="password" placeholder="Password">
  <textarea name="description" placeholder="Description"></textarea>
</form>

-1
    <script>
        if ($.browser.msie) {
            $('input[placeholder]').each(function() {

                var input = $(this);

                $(input).val(input.attr('placeholder'));

                $(input).focus(function() {
                    if (input.val() == input.attr('placeholder')) {
                        input.val('');
                    }
                });

                $(input).blur(function() {
                    if (input.val() == '' || input.val() == input.attr('placeholder')) {
                        input.val(input.attr('placeholder'));
                    }
                });
            });
        }
        ;
    </script>
1
  • $.browser.msie is no longer supported. Try using feature detection instead.
    – invot
    Aug 7, 2014 at 18:25

Not the answer you're looking for? Browse other questions tagged or ask your own question.