When I needed a placeholder for input, I began testing it on Chrome, Mozilla, and IE 10 (with IE8 still pending).
The placeholder attribute worked well in Chrome and Mozilla, but had strange behavior in IE 10. The text would disappear as soon as the input was focused, even before anything was typed.
I discovered that this was a bug in IE and later found an alternative at Placeholder using jQuery, which worked perfectly in IE 10, Mozilla, and Chrome. However, its compatibility with IE 8 remains uncertain.
My query is:
Will the jQuery-created placeholder outperform the built-in CSS attribute "placeholder"? If jQuery's performance is lacking, I am willing to stick with the CSS attribute despite the flawed behavior in IE. This decision is crucial as the page I am working on will experience heavy traffic. Additionally, I need to test jQuery in IE 8.
Solution Post Feedback: I have decided to opt for the jQuery-generated CSS due to several reasons:
- IE 8 does not support the placeholder attribute.
- IE 10 experiences issues with the behavior of placeholders.
- A simple jQuery plugin ensures compatibility across IE, Mozilla, and Chrome, with room for customization.
- Considering that my page will only feature up to 4 input fields, the minor impact on performance compared to CSS is acceptable given the low number of elements on the page.