Solution for implementing placeholder effect _ jquery

Since placeholder is a new attribute of html5, it is conceivable that only html5 browsers support placeholder. Currently, the latest firefox, chrome, safari, and ie10 are supported, and neither ie6 nor ie9 are supported. Placeholder is html5 It provides the hint that can describe the expected value of the input field. The 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:

  
 Mobile phone number/email address
  
 Enter Password

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, the original property placeholder is discardedAdd a property phText = "mobile phone number/Email Address ". By default, the value is the prompt text and the color is gray;If the value is equal to the value of phText when the focus is obtained, the value is null;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 the password type.AndWhen the focus is obtained, the prompt text disappears (when the value is equal to the phText property value), which is different from the original placeholder property.

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 value of placeholderAnd set the color to gray, and thenWhen the value is equal to the value of placeholder when the focus is obtained, 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,To addDisplays the prompt text.HideDisplay and 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.