Summary of schemes to achieve placeholder effects _jquery

Placeholder is a property of html5<input> that provides a hint (hint) that describes the expected value of the input field, which is displayed when the input field is empty. High-end Browsers support this property (IE10/11 text disappears when the focus is obtained), and IE6/7/8/9 is not supported. The following three sets of scenarios are for reference only, in order to be compatible with the main browsers and to make them appear in the same performance.

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:

<li>
  <div class= "INPUTMD" style= "position:relative;" >
    <input class= "Phinput" type= "text"/> <span class= "Phtext" style= "Clear:both";
    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"
    ; ; 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):

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 to traverse 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 changes) and loss of focus to determine whether the value is empty
    var _ This is = $ (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:

function Inputjsdiy (obj, Colortip, colortxt) {//define functions, passing 3 Parameters--dom object, color value of hint text, color value of input text Colortip = Colortip | |
  ' #aaaaaa '; Colortxt = Colortxt | |
  ' #666666 ';
    Obj.each (function () {var _this = $ (this); _this.css ({"Color": Colortip}); The input box color defaults to the color value of the hint text if ($.trim (_this.val ()) = = "") {//To determine if value is NULL, and null value is assigned equal to prompt text _this.val (_this.attr ("Phte
    XT "));
  else if (_this.val ()!= _this.attr ("Phtext")) {_this.css ({"Color": colortxt});//Normal input text color value}});
    Obj.on ("Focus", function () {///////////= _this = $ (this);
    var value = _this.val ();
    if (value = = _this.attr ("Phtext")) {_this.val ("");
  } _this.css ({"Color": Colortxt});
  });
    Obj.on ("Blur", function () {//Lost focus when judging var _this = $ (this);
    var value = _this.val ();
    if ($.trim (value) = = "") {_this.val ($ (this). attr ("Phtext")). CSS ({"Color": Colortip});
  }
  });
      Obj.parents ("form"). On ("Submit", function () {///When submitting the form, remove the hint text (empty the hint text) Obj.each (function () {var _this = $ (this);
      if (_this.val () = = _this.attr ("Phtext")) {_this.val ("");
  }
    });
}); } inputjsdiy ($ (' phinput '), ' #aaa ', ' #666 ');

 Call function

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.

The above mentioned is the entire content of this article, I hope you can enjoy.