Summary of solutions for implementing the placeholder Effect

Summary of solutions for implementing the placeholder Effect

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:

1 2 3 4 5 6 7 8 9 10 11 12

<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> <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 ):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

Function _ placeholderText (phInput, phText) {// defines the function. Two parameters are passed: the input box and the id or class of the text prompt text. Var $ input = $ (phInput ); Var $ text = $ (phText ); $ Input. each (function () {// traverses all inputs that are similar to placeholder when the page is loaded Var _ this = $ (this ); Var _ text = _ this. 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. When the value changes (in fact, the attribute changes) and when the focus is lost, it determines whether the value is null. Var _ this = $ (this ); If (_ this. val () = ''){ _ This. siblings (phText). show (); } Else { _ This. siblings (phText). hide (); } }); }   _ PlaceholderText ('. phinput','. phtext'); // call a 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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

Function inputJsDIY (obj, colorTip, colorTxt) {// defines the function and transmits three parameters: DOM object, color value of the prompt text, and color value of the input text. 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 () {// determine when getting the focus Var _ this = $ (this ); Var value = _ this. val (); If (value = _ this. attr ("phText ")){ _ This. val (""); } _This.css ({"color": colorTxt }); }); Obj. on ("blur", function () {// when the focus is lost Var _ this = $ (this ); 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.