Solutions for implementing placeholder effect and placeholder

Solutions for implementing placeholder effect and placeholder

Placeholder is an attribute of html5 <input>. It provides a hint that describes the expected value of an input field. This hint is displayed when the input field is empty. High-end browsers support this attribute (Text disappears when ie10/11 gets the focus), while ie6/7/8/9 does not. To be compatible with mainstream browsers and make their presentation consistent, the following three solutions are for your reference only.

Solution 1:

Discard the original property placeholder, add a sibling node span for the input, and set absolute positioning for the span (the parent node is position: relative;) so that it is located above the input. The html code snippet is as follows:

<Li> <div class = "inputMD" style = "position: relative; "> <input class =" phInput "type =" text "/> <span class =" phText "style =" clear: both; height: 33px; line-height: 33px; color: # aaa; position: absolute; left: 10px; top: 5px; "> mobile phone number/email address </span> </div> </li> <div class =" inputMD "style =" position: relative; "> <input class =" phInput "type =" password "/> <span class =" phText "style =" clear: both; height: 33px; line-height: 33px; color: # aaa; position: absolute; left: 10px; top: 5px; "> enter the password </span> </div> </li>

The js Code is as follows (a simple function is written and no plug-in form is written, huh, huh ):

Function _ placeholderText (phInput, phText) {// defines the function. Two parameters are passed: the id of the input text box and the text prompt, or class var $ input =$ (phInput ); var $ text = $ (phText); $ input. each (function () {// traverse all input var _ this = $ (this); var _ text = _ this when the page is loaded. siblings (phText); if ($. trim (_ this. val () = '') {_ this. val (""); _ text. show ();} else {_ text. hide () ;}}); $ text. on ('click', function () {// click the prompt message, and input gets the focus $ (this ). siblings (phInput ). focus () ;}); $ input. on ('input propertychange blur', function () {// registers an event for input, and the value changes (in fact, the attribute changes) determine whether the value is null var _ this = $ (this); if (_ this. val () = '') {_ this. siblings (phText ). show ();} else {_ this. siblings (phText ). hide () ;}}) ;}_ placeholderText ('. phInput ','. phtext'); // call the Function

Personal conclusion: solution 1 applies to login pages, but is not suitable for background form forms and front-end search pages, because it is unfriendly to add new prompt text labels.

Solution 2:

Similarly, you can discard the original placeholder attribute and add a property phText = "mobile phone number/Email Address" for <input> ". By default, the value is the prompt text and the color is gray. <input> If the value is equal to the value of phText, the value is left blank; <input> If the value is null when the focus is lost, the value is the prompt text. The js Code is as follows:

Function inputJsDIY (obj, colorTip, colorTxt) {// define a function, pass three parameters-DOM object, prompt text color value, and input text color value colorTip = colorTip | '# aaaaaa'; colorTxt = colorTxt | '#666666 '; obj. each (function () {var _ this = $ (this); _this.css ({"color": colorTip }); // The Color of the input box is set to the color value of the prompt text by default if ($. trim (_ this. val () = "") {// determines whether the value is null. If it is null, the value assignment equals to the prompt text _ this. val (_ this. attr ("phText");} else if (_ this. val ()! = _ This. attr ("phText") {_this.css ({"color": colorTxt}); // normal input text color value}); obj. on ("focus", function () {// judge var _ this = $ (this) when getting the focus; var value = _ this. val (); if (value = _ this. attr ("phText") {_ this. val ("") ;}_this.css ({"color": colorTxt}) ;}); obj. on ("blur", function () {// judge var _ this = $ (this) when the focus is lost; var value = _ this. val (); if ($. trim (value) = "") {_ this. val ($ (this ). attr ("phText" )).css ({"color": colorTip}) ;}}); obj. parents ("form "). on ("submit", function () {// remove the prompt text when submitting the form (leave the prompt text blank) obj. each (function () {var _ this = $ (this); if (_ this. val () = _ this. attr ("phText") {_ this. val ("") ;}}) ;}inputjsdiy ($ ('. phInput '),' # aaa', '#666'); // call a function.

Personal conclusion: solution 2 is suitable for the form and foreground search pages on the background page. It is easy to operate and has no additional tags. The disadvantage is that it cannot be used for <input> of the password type, and the prompt text disappears when <input> gets the focus (when the value is equal to the phText property value), which is different from the original placeholder attribute.

In addition, you can change the phText attribute to the placeholder attribute to support the original effect of the browser. Unsupported browsers use js to judge {'placeholder' in document. createElement ('input')} calls the function in solution 2. This compromise scheme also has its disadvantages, and the effects of different browsers are not exactly the same.

Solution 3:

Write a method for browsers that do not support placeholder. First, assign the placeholder value to <input> and set the color to Gray. Then, if <input> obtains the focus and determines that the value is equal to the value of placeholder, move the cursor to the beginning (this. createTextRange and this. setSelectionRange ). When an input operation occurs, set the value to null before receiving the input value. In addition, for <input type = "password"> to add a <input type = "text"> to display the prompt text, when an input operation occurs, you need to hide <input type = "text"> and display <input type = "password"> to get the focus. This solution also has some minor defects, that is, a bug occurs when you right-click and paste it.

In general, each solution has its own advantages and disadvantages. On the login page, I prefer solution 1. The presentation results are exactly the same. It is not a hassle to add a new tag. The form in the background and the front-end search page are more inclined to solution 2, which is simple and effective, but the text disappears when the focus is obtained.

The above is all the content of this article. I hope you will like it.