Firefox/chrome/opera has supported this feature from a version, but the IE series is not supported by IE9, so JavaScript is required to be compatible with browsers that do not support placeholder features.
Popular Practice
The common practice now is to change the value by using the Onfocus/onblur event of the form element, as follows:
Copy Code code as follows:
<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:
Copy Code code as follows:
Since you cannot change the value of a text box, you can wrap it by adding a span or other element, placing it on top of the text box by absolute positioning, and wrapping it with a position:relative container in the bounding box to ensure that the message is not offset, such as:
Copy Code code as follows:
<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:
Copy Code code as follows:
<span style= "Position:absolute;" > Hint Information </span>
<input type= "Text"/>
This creates a more concise mark.
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:
Copy Code code as follows:
/* 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;
}
Then the HTML becomes the corresponding:
Copy Code code as follows:
<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:
Copy Code code as follows:
/* 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:
Copy Code code as follows:
<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:
Copy Code code as follows:
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:
Copy Code code as follows:
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:
Copy Code code as follows:
<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>
End
At this point, the function is complete, put all the code: Click to download, if there is additional requirements can be modified.
Author: Embarrassing month
Source: http://lwme.cnblogs.com/
