No-jQuery HTML5 placeholder fix

The “placeholder” attribute is a great new addition to HTML5, but it’s not supported in all  popular browsers (talking about you IE). I looked the web for a quick fix, but couldn’t find a polyfill, that didn’t require jQuery, so i decide to put one together myself.

<script type="text/javascript">
function hasPlaceholderSupport() {
  var input = document.createElement('input');
  return ('placeholder' in input);
}

if(!hasPlaceholderSupport()){
	var inputs = document.getElementsByTagName('input');
	for(var i=0,  count = inputs.length;i<count;i++){
		if(inputs[i].getAttribute('placeholder')){
			inputs[i].style.cssText = "color:#939393;font-style:italic;"
			inputs[i].value = inputs[i].getAttribute("placeholder");
			inputs[i].onclick = function(){
				if(this.value == this.getAttribute("placeholder")){
					this.value = '';
					this.style.cssText = "color:#000;font-style:normal;"
				}
			}
			inputs[i].onblur = function(){
				if(this.value == ''){
					this.value = this.getAttribute("placeholder");
					this.style.cssText = "color:#939393;font-style:italic;"
				}
			}
		}
	}
}
</script>

I took the very  nice check for placeholder support from David Walsh’s blog. Thanks David.

How to use?

You just put it at the bottom of your page just before the closing </body> tag, or you can call it inside window.onload.

Why no-jQuery?

I like jQuery very much, but i don’t want to load 70k just for placeholder polyfill,.. or to use $(‘document’).ready(); when there are very good replacements.

 

20 Responses to “No-jQuery HTML5 placeholder fix”

  1. Kris Noble Says:
    May 10th, 2012 at 6:11 am

    Awesome, thanks for sharing! It always shocks me just how many people think JavaScript == jQuery these days 🙁

  2. Ed Wright Says:
    November 5th, 2012 at 3:30 pm

    This is really great, works a treat! Thankyou.

    Is it possible to adjust the code to allow for textareas?

    ?

  3. admin Says:
    November 5th, 2012 at 10:15 pm

    Unfortunately no.

  4. Caroline Says:
    January 16th, 2013 at 10:52 am

    Doesnt seem to work in IE9 ?

  5. salma Says:
    January 24th, 2013 at 9:11 pm

    its not working ..what can i do?plz help me..

  6. Milan Golubović Says:
    March 10th, 2013 at 5:08 am

    Hey man, this really rocks!

    First one that works from few I’ve tried and best of all – doesn’t need jQuery.
    Now, I don’t remember that I’ve made some site which is not including jQuery, but there is always issue with versions….

    Not with this code!

    Thank you!

  7. ArjayM Says:
    May 21st, 2013 at 10:17 pm

    Wow! this is a big help. Thanks! Placeholder is much better rather than adding value in it.

  8. Arthur Says:
    May 24th, 2013 at 8:14 am

    Why did you use onclick instead of onfocus?

  9. bergie Says:
    June 28th, 2013 at 1:41 pm

    Thanks!!! Once in a while you gotta do things without jQuery.

  10. Willabee Says:
    August 25th, 2013 at 3:18 am

    It is possible to modify code for textarea. Change:
    var inputs = document.getElementsByTagName(‘input’);

    to:
    var inputs = document.getElementsByTagName(‘*’);

  11. Willabee Says:
    August 25th, 2013 at 3:22 am

    The previous would process all elements in the DOM so it would be better to reference the form first and search in the context of the form only:

    var inputs = myForm.getElementsByTagName(‘*’);

  12. Wasif Says:
    September 19th, 2013 at 7:47 am

    It does not works

  13. admin Says:
    October 13th, 2013 at 11:57 am

    Do you have a demo?

  14. Bill J. McCarley Says:
    October 29th, 2013 at 3:39 pm

    Thank you for a straight javascript solution. Like you, why load a full jquery library for a simple thing. I like javascript.

  15. kaushik Says:
    June 26th, 2014 at 6:07 am

    yes, this is perfect solution for internet explorer placeholder problem

  16. Suraj Says:
    July 18th, 2014 at 6:45 am

    Thank you…super solution…

  17. Sidney Says:
    September 24th, 2014 at 5:37 am

    Thank you so much! I also didn’t want to have to load extra unused code.

  18. j00100 Says:
    January 7th, 2015 at 6:38 pm

    In order to add a placeholder for a textarea just add this script underneath the original code. I’m not a javascript developer so there may be a better solution but this gets it working.

    I just renamed the function and replaced the second ‘input’ with ‘textarea’

    function hasPlaceholderSupport2() {
    var input = document.createElement(‘input’);
    return (‘placeholder’ in input);
    }

    if(!hasPlaceholderSupport2()){
    var inputs = document.getElementsByTagName(‘textarea’);
    for(var i=0, count = inputs.length;i<count;i++){
    if(inputs[i].getAttribute('placeholder')){
    inputs[i].style.cssText = "color:#939393;"
    inputs[i].value = inputs[i].getAttribute("placeholder");
    inputs[i].onclick = function(){
    if(this.value == this.getAttribute("placeholder")){
    this.value = '';
    this.style.cssText = "color:#000;font-style:normal;"
    }
    }
    inputs[i].onblur = function(){
    if(this.value == ''){
    this.value = this.getAttribute("placeholder");
    this.style.cssText = "color:#939393;font-style:italic;"
    }
    }
    }
    }
    }

  19. Osman Fikret Ceylan Says:
    March 10th, 2015 at 11:52 pm

    Thank you very much.
    It will be more useful as native JavaScript.

  20. Felix Says:
    July 8th, 2015 at 11:12 am

    Saved my day, thanks a lot!

Leave a Reply