JavaScript text box watermark/Placeholder Implementation method

Source: Internet
Author: User

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

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.