JQuery plugin implementation-custom Placeholder

The new placeholder attribute of the text box in HTML5 is a very useful attribute, but it is not supported by the IE series until IE9, which makes everyone hesitate when using this attribute. I have written many similar widgets, but none of them are very common. Here I will share a jQuery plug-in with a progressive enhancement of the custom placeholder. It is easy to use. You can also make improvements based on your own needs. JQuery plug-ins are rarely written. Considering that there are many jQuery users, we have written them here in the form of jQuery plug-ins.

Here we will briefly introduce the Implementation ideas.

1. The performance is similar to that of the native placeholder of html5.
2. progressive enhancement is not applicable to browsers that support placeholder.
1. First, there are several tool methods:

■ SupportProperty (nodeType, property) to obtain whether the browser supports a certain property of a control
■ GetPositionInDoc (target, parent) to get the object's position in the document
■ $ C: A method for quickly creating Dom objects
These tools and methods are common and common methods. If you have your own or more suitable tools, you can replace them by yourself.

2. The CustomPlaceholder object. This object is mainly used to maintain the information of each text box, including its location, prompt information to be displayed, and other methods such as creating prompt information and locating, as well as corresponding events of the object.

Events are mainly handled in the initEvents function. Here, you must pay special attention to the handling of prompt information events. When the prompt information is clicked, the focus should be repositioned to the text box. The text box must handle the focus and blur events.

The Code is as follows:	Copy code
$ (Self. hint). bind ('click', function (e ){ Self. input. focus (); }); $ (Self. input). bind ('focal ', 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 a DOM object used to create the prompt information, locate it, and return this object. The position method is used to force the prompt message to be relocated. It is mainly used for page size changes. The functions and implementations of these two methods are relatively simple.

3. Functions of the plug-in. The jQuery plug-in implementation method is not much said. Here we first perform the capability detection. If the native supports placeholder, it will return directly.

The Code is as follows:	Copy code
If (suppproperty property ('input', 'placeholder ')){ Return;

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

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, it is important to bind the resize event to the window object. When the window object triggers the resize event, all customPlacehoder objects are located again.

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 small plug-in has been written here.