JavaScript text box watermark/placeholder (Watermark/placeholder) Implementation method _javascript tips

Source: Internet
Author: User
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:
<input type= "Text"/>


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/
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.