HTML5 placeholder practical application experience sharing and development

QQ Mail Login (http://mail.qq.com)
as follows:

In the above a demo similar principle made the next modification, produced a interactive effect of this demo, I hope that interested peers can help a little busy, you can click here: the change of transparency placeholder Interactive demo

The demo above must be viewed under a browser that does not support the placeholder property. Below from IE9 browser:

Similarly, the relevant code refers to the demo page. The same is the label element of the overlay form, and the right-click context is problematic.

VIII. synthesis: Placeholder analog jquery Plugin

Finally, attach a placeholder analog plug-in that combines the above such as discussion –jquery.placeholder.js (very small, plus more than 100 lines of comments)

It is the danger of their own family tonight to risk writing (Lantern Festival, after supper ran the company came), in a hurry, a simple test, some bug fixes later.

Use
1. js section
The following is the simplest example:

<script src= "Jquery1.7.1-min.js" ></script><script src= "Jquery.placeholder.js" ></script> <script>$ (function () {    $ ("#test"). placeholder ();}); </script>

2. Corresponding HTML
The above script corresponds to the following HTML code:

<input id= "test" placeholder= "testing"/>

Parameters
Plug-in related parameters see the following table:

title	Description	default
Labelmode	Boolean whether the placeholder effect is simulated with a label label. The default is false, which means using the value simulation method	False
LabelStyle	Object if you use the Label emulation method, the label element that is created resets the or new style set	{}
Labelalpha	Boolean If you use the label emulation method, whether the interactive mode uses the form of transparency switching. The default is False, which indicates that the interaction is not displayed with a value display	False
Labelacross	Boolean If you use the label emulation method, and the interactive mode is the transparency toggle, does it make all browsers this effect (reset the default placeholder interaction of modern browsers). The default is false, which means that the browser uses its own placeholder interaction effect by default.	False

Instance page
You can really click here: Jquery.placeholder.js Plugin Simple test Demo

A small demo page (after the next day added how to let the "label prompt text in the text box below the display" instance, so the demo actual appearance and below a little bit):

Description

1. The plug-in supports the value simulation method and the label simulation method, and the label simulation method supports the new transparency interaction effect, and it can be set whether Firefox, Chrome and other browsers also interact in this form.
2. When you use the label mode to simulate a placeholder, if the text control does not id , the plug-in automatically creates a random one id .
3. Because plug-ins are considered to be hidden at the bottom of the element (because you cannot force the text control background to be transparent), the label elements of the plug-in are overlaid on the text control to emulate the placeholder effect. Therefore, the right-click context is problematic. What the plugin does with this is to drop the event of the placeholder context to the wall. You can labelStyle change the position of the placeholder label element by the parameter of the level Ah, location what to perfect this small problem.
4. The incident is hasty, the bug certainly has. If you are lucky enough to be used, and have found a problem, please submit a bug.

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=2169

HTML5 placeholder practical application experience sharing and development