Input placeholders for Internet Explorer

html

cross-browser-compatibility

polyfills

placeholder-text

byNikita Barsukov·Dec 15, 2024

Grant placeholders in Internet Explorer to inputs lacking native aid using JavaScript. Utilize jQuery for a compact solution:

// 'placeholder' support for browsers that decided to take a break
$('input[placeholder]').focus(function() {
  var input = $(this);
  // No more confusing placeholder data with actual data
  if (input.val() === input.attr('placeholder')) {
    input.val('').removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  // We want placeholders, not echoes of them
  if (input.val() === '' || input.val() === input.attr('placeholder')) {
    input.addClass('placeholder').val(input.attr('placeholder'));
  }
}).blur().parents('form').submit(function() {
  // House cleaning before guests (aka data) arrive
  $(this).find('input[placeholder]').each(function() {
    var input = $(this);
    // No placeholders allowed in the data party
    if (input.val() === input.attr('placeholder')) {
      input.val('');
    }
  });
});

Paste this Yoda-inspired jQuery script at the HTML's end to flawlessly replicate placeholder behaviour: it auto displays and hides the placeholder text during focus and blur events.

Enhancing cross-browser compatibility

Placeholder text's cross-browser support can be trickier than a Rubik's cube, as IE10 and older versions have their own unique dance steps. Some browsers may not clear the placeholder on input focus, or they might require different events to properly manage it.

Polyfills: Fill in the gaps!

Placeholder.js and jQuery-html5-placeholder are like those fancy Greek statues, providing extra support and aesthetic touch to your older IE versions, with the latter using an overlaying label — making sure placeholder text isn't mistaken for the data if the field is left clean.

Magic on the go: Dynamic type switching!

Ever saw a magician switch cards? Be your own magician by including a switch from type="text" to type="password" and vice versa. This supports placeholder text, touching pain-points like password fields and keeping the ability to hide inputted text.

Fancy a clean form submission?

Nobody likes a dirty hallway; ensure a squeaky clean form submission by checking and removing default values. Swing into action and use jQuery to manage placeholders on focus and blur events, and especially before form submission, preventing placeholders from sneaking into your server.

Leap to better support in IE

Simulating placeholders in IE is as easy as pie once you get the hang of it.

Overlay is the new Underlay

jQuery-html5-placeholder isn't just a mouthful; it's fantastic at overlaying a label that becomes the placeholder text — better compatibility and usability in IE, all in one!

Dependency-free scripts

Want something light for your IE? Try Placeholder.js! With zero dependencies, it's light and works wonders without any other libraries.

Polyfills for the win!

Explore the GitHub treasury of HTML5 Cross Browser Polyfills for wider compatibility. Dive into scripts, bask in the glory of the Webshim library, and watch as IE's HTML5 feature limitations gracefully diminish!

Aren't demos amazing?

Convert concepts to a practical application. Go ahead, take a sneak peek at the demos provided for jQuery-html5-placeholder with IE9. It's like getting a free tour!

Think about your server

Avoid placeholder text from crashing your server party! Handle scripts properly to prevent the unwanted guest - placeholder text - from gatecrashing your database.

explain-codes / Html / Input placeholders for Internet Explorer

Linked

Placeholder in IE9



How do I auto-hide placeholder text upon focus using css or jquery?



Insert line break inside placeholder attribute of a textarea?



How to place the cursor (auto focus) in text box when a page gets loaded without javascript support?



How to support placeholder attribute in IE8 and 9

