• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
The Electric Toolbox Blog

The Electric Toolbox Blog

Linux, Apache, Nginx, MySQL, Javascript and PHP articles

  • Applications
  • FCKEditor
  • Apache
  • Windows
  • Contact Us
Home / Implement placeholders in IE8 & 9 (and other older browsers) with jQuery

Implement placeholders in IE8 & 9 (and other older browsers) with jQuery

HTML5 saw the introduction of the very useful placeholder attribute for input elements, but it’s not supported in Internet Explorer before version 10. There are still a number of people out there with version 8 & 9 but fortunately there are some ways to support placeholders in these older browsers with Javascript.

The old way

Before placeholders, I used to toggle default text on and off using Javascript and used an alternative field for dealing with password fields (here and here). You could still use these older methods for browsers that don’t support placeholders but I found a much simpler way to do it today.

Implementing placeholders in older browsers

I don’t claim any credit for the code on this page, I’ve just assembled it together and tested it on IE8 & IE9 and made sure it doesn’t run on modern browsers.

The testing for placeholders code comes from here.
The jQuery placeholder code comes from here.

You may want to change it to suit your own use-cases or other functions you might have for detecting whether placeholders are supported (e.g. with Modernizr) or use vanilla Javascript instead of jQuery.

function placeholderIsSupported() {
	var test = document.createElement('input');
	return ('placeholder' in test);
}

if(!placeholderIsSupported()) {
	$('[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();
}

Note that the password placeholder will still be masked and will not show whatever text you have put in there as a placeholder (.e.g placeholder=”password”). 

Check Out These Related posts:

  1. jQuery: show plain text in a password field and then make it a regular password field on focus
  2. Toggling a password field between plain text and password
  3. jQuery: show plain text in a password field and then make it a regular password field on focus – Part 2
  4. jQuery: Changing the default text value on focus, and showing plain text in a password field Part 1

Filed Under: HTML And CSS, Javascript

Primary Sidebar

Categories

  • Apache
  • Applications
  • Article
  • Case Studies
  • Email Servers
  • FCKEditor
  • HTML And CSS
  • Javascript
  • Linux/Unix/BSD
  • Microsoft SQL Server
  • Miscellaneous Postings
  • MySql
  • Networking
  • Nginx Web Server
  • Offsite Articles
  • OSX
  • PHP
  • Quick Tips
  • RFC – Request for Comments
  • SilverStripe
  • VMWare
  • VPN
  • Windows
  • WordPress

Recent Posts

  • Vim Show Line Numbers
  • Add User To Group Linux
  • Chmod 777 Tutorial
  • How to Copy Directory Linux
  • Linux create user

Copyright © 2021. ElectricToolBox. All Rights Reserved.

  • Contact Us
  • Copyright Info
  • Privacy Policy
  • Sitemap