A custom Placeholder attribute plug-in implemented by jQuery_jquery

The new attribute placeholder of HTML5 Chinese text box is a very useful attribute, but the IE series until IE9 does not support this attribute, which makes everyone hesitant when using this attribute. I have written many similar small controls, but they are not very versatile. Here I share a progressively enhanced custom placeholder jQuery plug-in. One thing is that it is simple to use, and everyone can improve it according to their own needs. Usually, there are relatively few jQuery plug-ins written. Considering that many students use jQuery, I will write it here in the form of jQuery plug-in.

Here is a brief introduction to the implementation ideas.

1. The performance is as similar as possible to the native placeholder of html5
2. Progressive enhancement does not process browsers that support placeholder

1. First, a few tools and methods:

1.supportProperty(nodeType, property), get whether the browser supports a certain property of a certain control
2.getPositionInDoc(target, parent), get the position of the object in the document
3.$c, a method to quickly create Dom objects

These tools and methods are some common and general methods. If you have your own or more suitable ones, you can replace them by yourself.

2. Main body, CustomPlaceholder object. This object mainly maintains the information of each text box, including its position, the prompt information that should be displayed, etc. In addition, it also contains methods for creating prompt information and positioning, as well as the corresponding events of the object.

Events are mainly processed in the initEvents function. Special attention should be paid here to the processing of prompt information events. When the prompt information is clicked, the focus should be repositioned to the text box. The text box needs to handle focus and blur events.

Copy code The code is as follows:

$(self.hint).bind( 'click', function(e){
self.input.focus();
});

$(self.input).bind( 'focus', function(e){
self.hint.style.display = 'none';
});

$(self.input).bind( 'blur', function(e){
if(this.value == ''){
self.hint.style.display = 'inline';
}
});

The two main methods of the CustomPlacehodler object are createHintLabel(text, position) and position(). createHintLabel is used to create a DOM object of prompt information, locate it, and return this object. The position method is used to force the prompt message to be repositioned. Mainly used when the page size changes. The functions and implementation of these two methods are relatively simple.

3. The function implementation part of the plug-in. I won’t go into details about how to implement the jQuery plug-in. Here, the capability is checked first, and if placeholder is natively supported, it will be returned directly.

Copy code The code is as follows:

if(supportProperty('input', 'placeholder')){
return;
}

The next step is to generate the corresponding CustomPlaceholder object based on the selected input object, save it in the array, obtain the DOM object of the prompt information of each object, add it to the container, and finally attach the container to the body object.

Copy code The code is as follows:

var customPlaceholders = [];
if(this.length > 0){
var box = $c('div', 'dk_placeholderfixed_box');
for(var i = 0, len = this.length; i < len; i ){
var input = this[i];
customPlaceholders.push(new CustomPlaceholder(box, input, option));
}

document.body.appendChild(box);
}

Finally, there is one more important thing. Bind the resize event to the window object. When the window object triggers the resize event, reposition all customPlacehoder objects.

Copy code The code is as follows:

$(window).bind( 'resize', function(e){
for(var i = 0, len = customPlaceholders.length; i < len; i ){
var customPlaceholder = customPlaceholders[i];
customPlaceholder.position();
}

});

This simple little plug-in is finished here.

Plug-in source code:

(function($){

var eles = {
	div: document.createElement('div'),
	ul: document.createElement('ul'),
	li: document.createElement('li'),
	span: document.createElement('span'),
	p: document.createElement('p'),
	a: document.createElement('a'),
	fragment: document.createDocumentFragment(),
	input: document.createElement('input')
}
	
var supportProperty = function(nodeType, property){
	switch(arguments.length){
		case 0:
			return false;
		case 1:
			var property = nodeType, nodeType = 'div';
			property = property.split('.');
			
			if(property.length == 1){
				return typeof eles[nodeType][property[0]] !== 'undefined';
			}else if(property.length == 2){
				return typeof eles[nodeType][property[0]][property[1]] !== 'undefined';
			}
		case 2:
			property = property.split('.');
			
			if(property.length == 1){
				return typeof eles[nodeType][property[0]] !== 'undefined';
			}else if(property.length == 2){
				return typeof eles[nodeType][property[0]][property[1]] !== 'undefined';
			}
			
			return false;
			
			
		default:
			return false;
	}
};

var getPositionInDoc = function(target, parent) {
	if (!target) {
		return null;
	}
	var left = 0,
		top = 0;
	do {
		left += target.offsetLeft || 0;
		top += target.offsetTop || 0;
		target = target.offsetParent;
		if(parent && target == parent){
			break;
		}
	} while (target);
	return {
		left: left,
		top: top
	};
}

var $c = function(tagName, id, className){
	var ele = null;
	if(!eles[tagName]){
		ele = eles[tagName] = document.createElement(tagName);
	}else{
		ele = eles[tagName].cloneNode(true);
	}
	if(id){
		ele.id = id;
	}
	if(className){
		ele.className = className;
	}
	return ele;
};
	
var CustomPlaceholder = function(box, input, option){
	var self = this;
	var position = getPositionInDoc(input);
	self.input = input;
	
	self.option = {xOffset:0, yOffset:0};
	for(var item in option){
		self.option[item] = option[item];
	}
	self.hint = self.createHintLabel(input.getAttribute('placeholder'), position);
	box.appendChild(self.hint);
	
	self.initEvents = function(){
		$(self.hint).bind( 'click', function(e){
			self.input.focus();
		});
		
		$(self.input).bind( 'focus', function(e){
			self.hint.style.display = 'none';
		});
		
		$(self.input).bind( 'blur', function(e){
			if(this.value == ''){
				self.hint.style.display = 'inline';
			}
		});
	};
	
	self.initEvents();
};

CustomPlaceholder.prototype = {
	createHintLabel: function(text, position){
		var hint = $c('label');
		hint.style.cusor = 'text';
		hint.style.position = 'absolute';
		hint.style.left = position.left + this.option.xOffset + 'px';
		hint.style.top = position.top + this.option.yOffset + 'px';
		hint.innerHTML = text;
		hint.style.zIndex = '9999';
		return hint;
	},
	position: function(){
		var position = getPositionInDoc(this.input);
		this.hint.style.left = position.left + this.option.xOffset + 'px';
		this.hint.style.top = position.top + this.option.yOffset + 'px';
	}
};

$.fn.placeholder = function(option){
	if(supportProperty('input', 'placeholder')){
		return;
	}
	var customPlaceholders = [];
	if(this.length > 0){
		var box = $c('div', 'dk_placeholderfixed_box');
		for(var i = 0, len = this.length; i < len; i++){
			var input = this[i];
			if($(input).is(':visible')){
				customPlaceholders.push(new CustomPlaceholder(box, input, option));
			}
		}
		
		document.body.appendChild(box);
	}
	
	$(window).bind( 'resize', function(e){
		for(var i = 0, len = customPlaceholders.length; i < len; i++){
			var customPlaceholder = customPlaceholders[i];
			customPlaceholder.position();
		}
		
	});
};

})(jQuery);