I hoped I will never hear about IE9 and its lack of support for the placeholder attribute, … I had high hopes.
I’ve boiled a simple fallback, late in the evening and in a rush, using IE conditional comments for browser detection.
<!--[if IE 8 ]> <html class="ie8 lt-ie10"> <![endif]--> <!--[if IE 9 ]> <html class="ie9 lt-ie10"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html><!--<![endif]-->
$(document).ready(function() {
// HTML5 placeholders fallback for IE9 and older
if ($('html').hasClass('lt-ie10')) {
// add the placeholder text as value
$('textarea, input:text').each(function() {
$(this).attr('value', $(this).attr('placeholder'));
});
// clear form fields on focus
$('textarea, input:text').on('focus click', function(){
if (this.value == this.defaultValue) {
this.value = '';
}
}).on('blur', function(){
if (this.value == '') {
this.value = this.defaultValue;
}
});
}
});
Leave a Reply