I so much love Chrome browser and cant really stand IE. They have been on the market forever and still they have the slowest browser ever. Even IE9 does not support such a convenient attribute called ‘placeholder’. I had to write a Javascript that does the trick. 

1. include jQuery  into the head of the page

2. save script content below into the file placeholder.js and include it after jquery.js

3. placeholder attribute is for the form elements, please call this method before u submit a form.

removePlaceholders();

4. placeholder.js

$(document).ready( function () {
 
	if(!isSupportsPlaceholder()) {
		$("input[placeholder]").each(function() {
			var $input = $(this);
 
			//activate placeholder
			placeholder($input);
 
			$input.focus(function() {
				removePlaceholder($input);
			});
 
			$input.blur(function() {
				placeholder($input);
			});
 
		});
	}
});
 
//checks if browser supports placeholders
function isSupportsPlaceholder() {
	var test = document.createElement('input');
	return 'placeholder' in test;
}
 
//activates placeholder on a field
function placeholder(el) {
	if(el.val() === '') {
		el.val(el.attr('placeholder'));
		el.attr('placedholder', (el.css('color') ? el.css('color') : ''));
		el.css('color', '#ccc');
	}
}
 
//this methods removes placeholder
function removePlaceholder(el) {
	if(el.attr('placedholder')) {
		el.val('');
		el.css('color', el.attr('placedholder'));
		el.removeAttr('placedholder');
	}
}
 
//this method has to be called when u submit a form in order to fix
//fields to submit properly
function removePlaceholders() {
	if(!isSupportsPlaceholder()) {
		$("input[placeholder]").each(function() {
			removePlaceholder($(this));
		});
	}
}

Dima Svirid

Software architect, JAVA, Spring, Hibernate, AngularJs, Backbone, MongoDB, Oracle. CTO and Co-Founder of Homeadnet.com

More Posts

Follow Me:

Tagged with: