Javascript Coder Javascript Coder - 2 years ago 122
jQuery Question

placeholder is not working in IE9

I am salesforce (SFDC) developer.
In my visualforce page for input box I am using placeholder code.

<div class="control-group">
<label class="control-label visible-desktop" for="first_name">First Name</label>
<div class="controls">
<input class="input-block-level" name="First Name" id="first_name" placeholder="First Name" value="" type="text" required="required" autofocus="autofocus" />

I checked in internet for some CSS hack but I didn't find any.
I find some javascript hack.

HTML5 Placeholder jQuery Plugin

Demo & Examples

But I don't want to use jQuery hack or something.

Answer Source

As IE9 doesn't support the placeholder attribute, you can do it in Javascript/jQuery like so (quickly written, not tested):

if(navigator.appVersion.match(/MSIE [\d.]+/)){
    var placeholderText = 'Some Placeholder Text';
        $(this).val() == '' ? $(this).val(placeholderText) : false;
        $(this).val() == placeholderText ? $(this).val('') : false;

Do the same for the blur event too, then that will mimic a placeholder attribute.


Okay, after rethinking this (due to the comment) this is really not the most elegant solution (however it does work), so I would disregard this answer totally.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download