0

I wanted a placeholder for input. I started testing for Chrome, Mozilla and IE 10 (IE8 is pending).

The attribute placeholder works fine in chrome and mozilla. But behaves weird in IE 10. As the focus goes to the input the text disappears even before writing something into input.

I found this is a bug in IE. Later got an alternative @ Placeholder using jQuery. This is working fine in IE 10, Mozilla and Chrome. Not sure if it works too in IE 8.

My Question goes here:

Will the placeholder created using jQuery will perform better than the inbuilt css attribute "placeholder" ? If the performance of jQuery is bad, I will stick with the CSS attribute and go ahead with the defective IE behavior. This is important as the page I am developing will have Maximum load. Also, I have to test this jQuery in IE 8.

Solution after provided answers: I decided to go with the CSS created by jQuery for following reasons:

  1. IE 8 doesn't support attribute placeholder.
  2. IE 10 has a bug with the behavior of placeholder.
  3. A small jQuery plugin will be compatible with IE, Mozilla and Chrome. Ans can be modified as per my convenience.
  4. The page I am designing will have MAX 4 input fields. As the items on page are less, performance will not matter much, although performance by CSS is better.
10
  • It is not a bug in IE as the HTML5 specification says this: "User agents should present this hint to the user [snip] when the element's value is the empty string or the control is not focused (or both), e.g. by displaying it inside a blank unfocused control and hiding it otherwise." Therefore, the placeholder text does not need to be presented when the control has focus. Aug 5, 2014 at 5:03
  • @rink.attendant.6 Thank you. I will add my requirement here:
    – Abs
    Aug 5, 2014 at 5:11
  • If you use the jQuery plugin you'll get more consistent behavior. Using built-in HTML features means you're subject to how each browser implements those features.
    – Barmar
    Aug 5, 2014 at 5:14
  • But performance may be poorer, as it will have to run Javascript for each input, instead of using the built=in code of the browser.
    – Barmar
    Aug 5, 2014 at 5:15
  • 2
    You should never depend on placeholders, since older browsers don't have them. You should have a label in addition to a placeholder, so the user will still know what they're supposed to enter when they're focused on the first input.
    – Barmar
    Aug 5, 2014 at 5:24

1 Answer 1

1

Consult CanIUse and notice only IE9 and below need the placeholder attribute polyfill. You can effectively load/activate the polyfill based on Modernizr's detection of native placeholder attribute support.

For IE10, the comments are right, and there will be a fix from the IE team soon.

To answer your actual question without tests, it's generally safer to assume that native implementations of browser features are faster than js versions that need to be parsed and interpreted by the browser. My guess is there isn't a huge difference, or one worth caring about. A well done polyfill can be faster than a poorly done native implementation. Bad performance shouldn't happen unless animation or event handlers get abused and either run too often or take too long to run each time.

1
  • I was not aware of modernizr tool. Thanks
    – Abs
    Aug 5, 2014 at 8:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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