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.
Abs
  • 100
  • 9
  • It is *not* a bug in IE as the [HTML5 specification](http://www.w3.org/html/wg/drafts/html/master/forms.html#the-placeholder-attribute) 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. – rink.attendant.6 Aug 05 '14 at 05:03
  • @rink.attendant.6 Thank you. I will add my requirement here: – Abs Aug 05 '14 at 05: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 05 '14 at 05: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 05 '14 at 05:15
  • @rink.attendant.6 Thank you. I will add my requirement here: I am redesigning a old login screen where the a lable has to be removed and make it as placeholder. As this is a login page, I have created a jQuery to focus on the first input on page load, if not input than the first button is selected on page load. Now, you can understand, in IE when the page is loaded the input is focused and the placeholder disappears. Hence the user will not get must be put inside this text box. So, is there any CSS hack to keep the text on focus i.e., similar to Chrome's behavior? – Abs Aug 05 '14 at 05:18
  • Without testing, one thing is fairly certain: The browsers' built-in way will be faster. However, unless you have thousands of checkboxes, or a lot of HTML markup, the difference will be negligible. But keep in mind, the **`placeholder` attribute is not supported in IE <= 9**. See http://caniuse.com/#search=placeholder – UweB Aug 05 '14 at 05:20
  • @Barmar Thanks. I doubt that the placeholder css uses javascript internally. But not sure. – Abs Aug 05 '14 at 05:22
  • That's what I'm saying. jQuery uses Javascript for each placeholder, the CSS doesn't, so the built-in attribute will perform better. So you have to decide which is more important: efficiency or consistency. – Barmar Aug 05 '14 at 05:23
  • 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 05 '14 at 05:24
  • @UweB : Thank you. I just tested the attribute placeholder in IE 8 and it does't work. Now, I am facing problems with the jQuery as well in IE 8, which I had implemented from [Placeholder using jQuery](http://steadicat.github.io/labels/) . I need much more research and analysis further. Thanks for your suggestions and important points! – Abs Aug 05 '14 at 06:09

1 Answers1

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.

Community
  • 1
  • 1
hlfcoding
  • 2,532
  • 1
  • 21
  • 25