placeholder(HTML 5) IE compatible plug-in

The placeholder attribute is used more and more frequently.
But in order to implement HTML 5 features, IE failed to implement this.
The following jQuery plug-in is used to implement this attribute on IE.
/**
 * [placeholder(HTML 5) IE implementation. Passed the test for IE9 and below.]
 * v 1.0 by oTwo July 31, 2014 11:45:29
 */
$.fn.placeholder = function() {
	// When the system supports placeholder, use the one that comes with the system.
	if ('placeholder' in document.createElement('input')) {
		return;
	}
	this.each(function(index, val) {
		var ele = $(this);

		//Create display layer
		var div = $('<div>').css({
			"color": "#cccccc",
			"cursor": "text",
			"position": "absolute",
			"display": ele.val() ? 'none' : 'block',
			"zIndex": ele.css('zIndex') == 'auto' ? 'auto' : ele.css('zIndex') - 0 + 1,
			"left": ele.offset().left + 14,
			"top": ele.offset().top,
			"width": ele.outerWidth() - 14,
			"height": ele.outerHeight()
		}).text(ele.attr('placeholder')).appendTo('body');

		//Bind event
		div.click(function(e) {
			ele.focusin().focus();
		});
		ele.focusin(function() {
			if ($(this).val()) {
				return;
			}
			div.hide();
		});
		ele.focusout(function() {
			if ($(this).val()) {
				return;
			}
			div.show();
		});
	});
	return this;
};

 

Guess you like

Origin blog.csdn.net/alxw2010/article/details/84620881