JavaScript text box watermark/Placeholder Implementation method

Popular Practice
The common practice now is to change the value by using the Onfocus/onblur event of the form element, as follows:

The code is as follows	Copy Code
<input type= "text" id= "Text1"/> <script> var el = document.getElementById ("Text1"); if (El.value = "") El.value = "prompt Information"; El.onfocus = function () { if (This.value = = "Prompt info") This.value = ""; }; El.onblur = function () { if (This.value = "") This.value = "prompt Information"; } </script>

Most of jquery's Watermark Plug-ins (Http://archive.plugins.jquery.com/plugin-tags/watermark) Use this approach, and may also have some style of setting operations.

This approach directly to the operation of form elements, convenient and efficient, more practical.

But it also has drawbacks:

Some operations also need to monitor the value of the form elements to achieve functionality, such as: AutoComplete, validation, etc.
You need to clear its value when submitting a form
There may be other drawbacks, of course, which are not listed here.

A better way
To avoid causing unnecessary trouble, avoid changing the value of the form element.

First, if there is a text box as follows:

<input type= "text"/> Since you cannot change the value of a text box, you can only add a span or other element and place it above the text box by absolutely positioning and add a position to the bounding box: Relative containers to wrap them to ensure that the message is not offset, such as:

The code is as follows	Copy Code
<span style= "position:relative;" > <span style= "Position:absolute;" > Hint Information </span> <input type= "Text"/> </span>

Inadvertently found Taobao login page does not need a volume plus a layer of position:relative containers to packaging will not be offset, so just need to put the hint information in the text box before the tag, as follows:

The code is as follows	Copy Code
<span style= "Position:absolute;" > Hint Information </span> <input type= "text"/> Such a token is more concise.

The appropriate style
Now that the final render tag has been identified, you need to define the appropriate style to make it look more beautiful, as follows:

The code is as follows	Copy Code
/* Main style of tag * * * . W-label { Position:absolute; padding:0 0 0 6px; margin:0; Font-size:. 8em; Color: #999; Opacity:1; } /* Hidden Mark/* . w-hide { Visibility:hidden; opacity:0; } /* The color of the tag when the form element gets focus . w-active { Color: #ddd; The HTML then becomes the corresponding: <span class= "W-label" > Hint info </span> <input type= "text"/> Related scripts

Although you do not need to change the value of the form element to achieve the effect, but still need to pass the Onfocus/onblur event to control the hint information, all implemented as follows:

The code is as follows

Copy Code

/* Event Bindings/* var addevent = Document.addeventlistener? function (element, type, fn) { Element.addeventlistener (Type, FN, false); } : function (element, type, fn) { Element.attachevent ("On" + Type, fn); }, /* Event Unbind */ Removeevent = Document.removeeventlistener? function (element, type, fn) { Element.removeeventlistener (Type, FN, false); } : function (element, type, fn) { Element.detachevent ("On" + Type, fn); }, /* text box watermark/placeholder */ Watermark = function (element, text) { if (!) ( This instanceof watermark)) return new watermark (element, text); var place = document.createelement ("span");//hint info tag Element.parentNode.insertBefore (place, Element);//position before the form element is inserted Place.classname = "W-label"; place.innerhtml = text; Place.style.height = Place.style.lineHeight = element.offsetheight + "px";//Set height, row height to center Element.place = this; function Hideifhasvalue () { if (Element.value && place.className.indexOf ("w-hide") = = 1) Place.classname + = "W-hide"; } function onfocus () { Hideifhasvalue () if (!element.value && place.className.indexOf ("w-active") = = 1) Place.classname + = "w-active"; } function OnBlur () { if (!element.value) { Place.classname = Place.className.replace ("w-active", ""); Place.classname = Place.className.replace ("W-hide", ""); } } function OnClick () { Hideifhasvalue (); try { Element.focus && Element.focus (); catch (ex) {} } Registering Individual Events Hideifhasvalue (); Addevent (element, "focus", onfocus); Addevent (element, "blur", OnBlur); Addevent (element, "KeyUp", Hideifhasvalue); Addevent (Place, "click", OnClick); Cancel Watermark This.unload = function () { Removeevent (element, "focus", onfocus); Removeevent (element, "blur", OnBlur); Removeevent (element, "KeyUp", Hideifhasvalue); Removeevent (Place, "click", OnClick); Element.parentNode.removeChild (place); Element.place = null; }; };

The above code controls the display, concealment, and style of the cue message tag, respectively, through the Focus/blur/keyup event of the form element, and also hides it and focuses on the form elements by the Click event that prompts for the message mark.

Finally, a unload method is provided to cancel the watermark.

Specific use
With the above JS and CSS, then you can directly use them to achieve watermark function, the following demo application and cancel watermark:

The code is as follows	Copy Code
<input id= "Text1" type= "text"/> <input type= "button" id= "Button1" value= "Cancel Watermark"/> <script> var m1 = watermark (document.getElementById ("Text1"), "hint info"); Addevent (document.getElementById ("Button1"), "click", Function () { M1.unload (); }); </script>

HTML5 placeholder Compatible
Now that you have the above implementation, it is also easy to be compatible with browsers that do not support HTML5 placeholder, and first, you need to determine whether the browser supports placeholder:

The code is as follows	Copy Code
var html5support = "placeholder" in document.createelement ("input");

Then, for browsers that do not support HTML5 placeholder, extract the placeholder content of the form elements, as follows:

The code is as follows	Copy Code
Placeholderform = function (form) { var ph, elems = form.elements, Html5support = "placeholder" in document.createelement ("input"); if (!html5support) { for (var i = 0, L = elems.length i < l; i++) { ph = Elems[i].getattribute ("placeholder"); if (ph) elems[i].ph = Watermark (Elems[i], ph); } } }

The demo code is as follows:

The code is as follows

Copy Code

<form id= "Form2" > <fieldset> <legend><strong> apply to form elements that do not support HTML5 placeholder watermark</strong></legend> <ul> <li> Text box: <input type= "Text" placeholder= textbox text Box/> </li> <li> Password box: <input type= "password" placeholder= "Password box password box"/> </li> <li> Multiple lines of text: <textarea placeholder= "Multiple lines of text" ></textarea> </li> </ul> </fieldset> </form> <script> Placeholderform (document.getElementById ("Form2")); </script>