Scenario Rollup for achieving placeholder effects

Programme I:

Discard the original attribute placeholder, add a sibling span for input, and set absolute positioning for span (the parent node is position:relative;) so that it is above input. The HTML code fragment 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; " > Please enter password </span> </div> </li>

JS code is as follows (simple write a function, did not write plug-in form, hehe):

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) {///define functions, passing 2 parameters--input the ID of the input box and text hint texts or class var $input = $ (phinput); var $ Text = $ (phtext); $input. each (function () {//page load-through all imitation placeholder input 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, input gets focus $ (this). Siblings (Phinput). focusing ();}); $input. On (' Input propertychange blur ', function () {//) registration event for input, value change (in fact, property change), and loss of focus to determine whether the value is empty var _this = $ ( this); if (_this.val () = = ") {_this.siblings (Phtext). Show ();} else {_this.siblings (phtext). Hide ();}); } _placeholdertext ('. Phinput ', '. Phtext '); Call function

Personal Summary: Scheme one applies to the login page, but for backstage form form and the search page of the foreground is not very suitable, because to add new hint text label, not too friendly.

Programme II:

Also discard the original attribute placeholder, add a property to <input> phtext= "mobile phone number/email address". By default, the value is the hint text and the color is gray;<input> when the focus is obtained, if the value is equal to the Phtext property value, the value value is null;<input> loses focus, if the value is empty, The value is the hint 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 This is the

Personal Summary: Scheme Two is more suitable for the background page form form and the foreground search page, simple operation, no additional tags. The disadvantage is that it cannot be used for <INPUT> of the password type, and the hint text disappears when the <input> gets focus (the value is equal to the Phtext property value), unlike the original placeholder property.

In addition, the Phtext property can also be changed to placeholder properties, the browser support to render the original effect, unsupported browser through JS to judge {' placeholder ' in document.createelement (' Input ')} Invokes the function in scenario two. This compromise also has its drawbacks, and browsers render different effects.

Programme III:

To write a method for browsers that do not support placeholder, first assign the placeholder value to <input> and the color to gray, then <input> when the focus is obtained, the value equals placeholder value. Move the cursor to the front (This.createtextrange and This.setselectionrange). When an input operation occurs, the value value is set to NULL before receiving the input value. In addition, for <input type= "password" > to add a <input type= "text" > to display the hint text, when an input operation occurs, you need to <input type= "text" > Hide, and then show the <input type= "password" > and get the focus. There are some minor drawbacks to this scenario, which is that when you paste with the right mouse button, a bug occurs.

Generally speaking, several schemes have their own advantages and disadvantages. Login page I prefer to use scheme one, rendering the effect is exactly the same, just add a new label is not trouble. The background form form and foreground search page are more likely to be two, simple and effective, but prompt text disappears when the focus is obtained.