jquery plug-in Implementation-Custom placeholder

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
1. First, there are several tool methods:

Supportproperty (NodeType, property), to obtain whether the browser supports one of the properties of a control
Getpositionindoc (target, parent), gets the location of the object in the document
$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.

2. Main body, 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.

The code is as follows	Copy Code
$ (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.

3. The function realization part of the plug-in. 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.

The code is as follows	Copy Code
if (supportproperty (' input ', ' placeholder ')) { Return

The next step is to generate the corresponding Customplaceholder object, save in the array, and get the information about each object's cue, add to the container, and finally attach the container to the body object, based on the input object you select.

The code is as follows	Copy Code
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.

The code is as follows	Copy Code
$ (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.