JavaScript text box watermark/placeholder (watermark/placeholder) implementation method_javascript skills

Firefox/Chrome/Opera have supported this feature since a certain version, but the IE series, even IE9, does not yet support it, so JavaScript needs to be used to be compatible with these browsers that do not support the placeholder feature.

Common practice
The commonly used practice now is to change the value through the onfocus/onblur event of the form element, as follows:

Copy code The code is as follows:

<script> <br>var el = document.getElementById("text1"); <br>if (el.value == "") <br>el.value = "Prompt message"; <br><br>el.onfocus = function() { <br>if (this.value == "Prompt message") <br>this.value = ""; <br>}; <br>el.onblur = function() { <br>if (this.value == " ") <br>this.value = "Prompt message"; <br>} <br></script>

JQuery's various watermark plug-ins (http://archive.plugins.jquery .com/plugin-tags/watermark) mostly adopt this approach, and may also include setting some styles and other operations.

This method directly operates the form elements, which is convenient, fast and more practical.

But it also has disadvantages:

Some operations also need to monitor the value of the form element to implement the function, such as: autocomplete, verification, etc.
Its value needs to be cleared when the form is submitted
Of course there may be other disadvantages, which will not be listed here.

Better approach
In order to avoid unnecessary trouble, avoid changing the value of the form element.

First, if there is a text box as follows:

Copy the code The code is as follows:

Since the value of the text box cannot be changed, the only way is to add a span or other element and place it above the text box through absolute positioning. And add a position:relative container to the outer frame to wrap them to ensure that the prompt information will not be offset, such as:

Copy code The code is as follows:

Prompt message

Accidentally discovering Taobao’s login page does not require additional Adding a layer of position:relative container for packaging will not cause offset, so you only need to place the prompt information mark before the text box, as follows:

Copy the code The code is as follows:

Prompt message

The markup generated in this way is more concise.
Corresponding style
Now that the final rendered markup has been determined, you now need to define the corresponding style to make it look more beautiful, as follows:

Copy code The code is as follows:

/* The main style of the label style */
.w-label {
position: absolute;
padding: 0 0 0 6px;
margin: 0;
font-size: .8em;
color: #999;
opacity: 1;
}
/* Hide Marker*/
.w-hide {
visibility: hidden;
opacity: 0;
}
/* The color of the marker when the form element gets focus*/
.w -active {
color: #ddd;
}

Then the html will correspondingly become:

Copy code The code is as follows:

Prompt message
:

Copy code

The code is as follows:

/* Event binding*/
var addEvent = document.addEventListener ?
function(element, type, fn) {
element.addEventListener(type, fn, false);
} :
function(element, type, fn) {
element.attachEvent("on" type, fn);
},
/* Event unbinding*/
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");//prompt information mark
element.parentNode.insertBefore(place, element);//Insert into the position before the form element
place.className = "w-label";
place.innerHTML = text;
place.style.height = place.style.lineHeight = element .offsetHeight "px";//Set height and line 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) {}
}
// Register each event
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 passes the focus/blur/keyup of the form element respectively Events are used to control the display, hiding and style of the prompt information mark; in addition, the click event of the prompt information mark is used to hide it and gain focus for the form element.
Finally, an unload method is provided to cancel the watermark.
Specific use
With the above js and css, you can use them directly to implement the watermark function. The following demonstrates applying and canceling the watermark:

Copy the code The code is as follows:

<script> <br>var m1 = watermark(document.getElementById("text1"), "Prompt message"); <br>addEvent(document .getElementById("button1"), "click", function() { <br>m1.unload(); <br>}); <br></script>

html5 placeholder Compatible
Now that the above implementation is available, it is also very simple to be compatible with browsers that do not support html5 placeholder. First, you need to determine whether the browser supports placeholder:

Copy Code The code is as follows:

var html5support = "placeholder" in document.createElement("input");

Then, browse the html5 placeholder that does not support it To extract the placeholder content of the form element, the implementation is as follows:

Copy code The code is 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 The code is as follows:

Apply watermark to form elements that do not support html5 placeholder< /legend>

• 
  Text box:
  
  < /li>
  
• 
  Password box:
  
  

< ;li>
Multiline text:

<script> <br>placeHolderForm(document.getElementById("form2")); <br></script>

End
At this point, all functions are completed, put all the codes: Click to download, you can modify it yourself if you have additional needs.
Author:囧月
Source: http://lwme.cnblogs.com/

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn