How to support placeholder attribute in IE8 and 9

html

responsive-design

best-practices

polyfills

byAlex Kataev·Aug 30, 2024

To enable IE8/IE9 to support placeholders, use a JavaScript fallback on the focus and blur events for toggling placeholder text:

// Polyfill for placeholder in IE8/IE9
// Because old dogs can learn new tricks, right?
if (!('placeholder' in document.createElement('input'))) {
  var inputs = document.getElementsByTagName('input');
  for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    if (input.getAttribute('placeholder')) {
      var placeholder = input.getAttribute('placeholder');
      input.value = placeholder;
      input.style.color = '#A9A9A9'; // Fifty shades of placeholder
      
      input.onfocus = function() {
        if (this.value === placeholder) {
          this.value = '';
          this.style.color = '';
        }
      };
      
      input.onblur = function() {
        if (this.value === '') {
          this.value = placeholder;
          this.style.color = '#A9A9A9'; // Back to shade one
        }
      };
    }
  }
}

The code snippet above checks if the browser supports the placeholder attribute. If not, it mimics this attribute by assigning the value attribute the placeholder text and dynamically updating it on focus and blur. Additionally, it uses a light grey text color (#A9A9A9) to distinguish placeholder text from user inputs.

Checking for native support

Before you apply the fallback, check if the browser natively supports the placeholder attribute. Modern browsers usually have this support, so you need the fallback mainly for older IE versions. This checking can be done using Modernizr or a similar approach as in the fast answer section.

Handling color design

The placeholder text can often be confused with actual user input if there isn't any color differentiation. So, always assign a different light grey color for placeholder text to distort it from regular text.

Dealing with form submissions

Be cautious of placeholder text during form submissions. It's critical to ensure that this placeholder text doesn't get submitted as actual value. You can prevent this anomaly by cleaning up placeholder values during form submit events.

ASP.NET and jQuery compatibilities

When working on top of ASP.NET and jQuery, always validate your script against an environment that uses ViewState or Ajax features of ASP.NET. Your placeholder script should be placed after the jQuery library reference and inside $(document).ready function to initialize correctly.

Rounded up polyfills for added compatibility

To enhance your placeholder functionality, you may choose to use better-placeholder-polyfill or placeholders.js for power-packed support for non-native placeholder browsers, including password fields.

User experience and Accessibility

Your polyfill should not interfere with accessibility tools orscreen readers. Always test your implementation thoroughly to ensure it doesn't obstruct users who rely on these features.

Maintenance considerations

Your code documentation has to be precise and insightful. This helps not only in maintaining the code, but also in assisting future developers who might work with your project.

Plugging in placeholders

With custom events and additional styles, you can enhance the holistic functionality of placeholder texts in your forms. Make your forms more interactive by styling the placeholder states and adjusting behaviors to input events.

Dealing with complex forms

In complex forms, where form controls can be dynamically added or removed, ensure that placeholders behave as expected. Placeholder should refresh accurately with dynamic inputs and level up with your form validation scripts.

Testing in different browser environments

Always make sure to test your creating in the actual browsers they are made for. Browser emulators sometimes fall short in giving accurate outcomes, so always verify your code in real devices or virtual environments that run older browsers like IE8 and IE9.

Broaden your placeholder implementation.

Make your browser compatibility even wider by using HTML5 polyfills. Tools like HTML5 Boilerplate can help you provide expanded placeholder support and many other modern web perks on older browsers.

explain-codes / Html / How to support placeholder attribute in IE8 and 9

Linked

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



Can I mark a field invalid from JavaScript?



Disable pasting text into HTML form



:not(:empty) CSS selector is not working?



Html5 Number Input - Always show 2 decimal places

