placeholder is not working in IE9
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';
$('#first_name').val(placeholderText);
$('#first_name').blur(function(){
$(this).val() == '' ? $(this).val(placeholderText) : false;
});
$('#first_name').focus(function(){
$(this).val() == placeholderText ? $(this).val('') : false;
});
}
Do the same for the blur event too, then that will mimic a placeholder attribute.
[Edit]
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.
Javascript Coder
I am an IT professional with 9 years expertise in developing and implementing Web/Dashboard applications using Web technologies, Restful APIs**, PHP, Html5, Css3, JavaScript, jQuery, AngularJS, Angular 2, Angular 6, Angular 7, Node js, Express, Jasmine, ES6, D3js, Kendo UI, Leaflet JS, AMD (Require JS), Bootstrap, Svn/Git/TFS, JSON, Ajax, Grunt, webpack etc. My Linkedin Profile - https://www.linkedin.com/in/neerajswarnkar/
Updated on June 26, 2022Comments
-
Javascript Coder almost 2 years
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" /> </div> </div>
I checked in internet for some CSS hack but I didn't find any. I find some javascript hack.
HTML5 Placeholder jQuery Plugin
https://github.com/mathiasbynens/jquery-placeholder
Demo & Examples
http://mathiasbynens.be/demo/placeholder
But I don't want to use jQuery hack or something.