A custom placeholder attribute plug-in implemented by jquery _jquery

HTML5 the new properties of the Chinese text box placeholder is a very useful attribute, but the IE series does not support this property until IE9, which makes us hesitant to use this attribute. I've written a lot of similar widgets, but they're not very generic, and here's a step-by-step enhanced custom placeholder jquery plugin. A bit is simple to use, you can also according to their own needs to improve. Usually write jquery plug-ins less, considering the use of jquery more students, here is the form of jquery plug-ins.

Here a simple introduction to the realization of ideas.

1. Performance is as similar as the placeholder of HTML5 native
2. Progressive enhancements do not handle browsers that support placeholder

First, there are several tool methods:

1.supportProperty (NodeType, property), to obtain whether the browser supports one of the properties of a control
2.getPositionInDoc (target, parent), gets the location of the object in the document
3. $c, a quick way to create a DOM object

These tools are some of the more common methods, if you have your own or more appropriate to replace.

second, subject, Customplaceholder object. This object is primarily to maintain information about each text box, including its location, the hint information that should be displayed, and so on, and it also contains methods for creating hints and positioning, and corresponding events for objects.

Events are handled mainly in the Initevents function, where it is particularly important to note the handling of informational events, where the focus should be repositioned to the text box when the cue message is clicked. The text box is to handle focus and blur events.

Copy Code code 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 for Customplacehodler objects are Createhintlabel (text, position) and position (). Createhintlabel is the DOM object that is used to create the hint information and locates it and returns the object. The position method is used to force a relocation of the prompt message. Mainly used in the case of page size change. Both of these methods are simpler to function and implement.

third, the function of the plug-in implementation part. the jquery plug-in implementation is not much to say. In this case, the ability test is performed first, if the native support placeholder is returned directly.

Copy Code code as follows:

if (supportproperty (' input ', ' placeholder ')) {
Return
}

Next, based on the selected input object, generate the corresponding Customplaceholder object, save it in the array, get the DOM object for each object's hint information, add it to the container, and finally attach the container to the body object.

Copy Code code 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, a more important thing is to bind the Resize event for the Window object and reposition all Customplacehoder objects when the Window object triggers the Resize event.

Copy Code code 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 widget will be finished here.

Plug-in Source:

(function ($) {var eles = {div:document.createElement (' div '), ul:document.createElement (' ul '), Li:document.createE Lement (' Li '), span:document.createElement (' span '), p:document.createelement (' P '), A:document.createelement (' a '), F Ragment:document.createDocumentFragment (), input:document.createElement (' input ')} var supportproperty = function (no
		Detype, 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 cus
			Tomplaceholder = Customplaceholders[i];
		Customplaceholder.position ();
}
		
	});

};
 }) (JQuery);