Home>

placeholder is one of the attributes of html5<input> ;,There will be slightly different display effects in different browsers (modern browsers that support html5):

In chrome (v31.0.1650.63 m), firefox (v21.0), 360 security (v6.3 speed mode), after the input field gets focus,Prompt text does not disappear,As shown (chrome):

Before getting focus:

When getting focus:

It must be special for ie11:

Before getting focus:

When getting focus:

In other words, the text displayed when the focus is obtained will disappear.

Non-modern browsers (ie ie6-ie9) do not support the placeholder attribute. Now use jquery to make these non-modern browsers also achieve the display effect of placeholder.The first method achieves the effect of ie11,That is, the prompt text disappears when the input box gets focus;If i want to get a chrome-like effect, that is, the prompt text does not disappear when the input box gets focus,The second method can be used.

method one

Effect preview:

http://jsfiddle.net/l57b25yr/embedded/result/

The idea is to first determine whether the browser supports the placeholder attribute. If it does not,Iterate through all the input boxes, get the value of the placeholder property and fill the input boxes as prompt information.At the same time the font is set to gray.

When the input box gets focus and the text in the input box is equal to the set prompt message,Just clear the input box;

When the input box loses focus (blur) and the text in the input box is empty,Then fill the input box with the value of the obtained placeholder property as the prompt information,At the same time the font is set to gray;

When there is input (keydown) in the input box, the prompt information in the input box has been cleared by the focus event at this time,At this time, you only need to restore the font to black.

The disadvantage of this method is thatNot suitable for input boxes that get focus when the dom is loaded,Because from the user ’s perspective,The input box that gets focus when you finish loading the page,Its prompt text is invisible.

html:

<input type="text" name="uname" placeholder="Please enter user name" />

css:

.phcolor {color:#999;}

js:

$(function () {
  //Determine whether the browser supports the placeholder property
  supportplaceholder="placeholder" in document.createelement ("input"),  placeholder=function (input) {
    var text=input.attr ("placeholder"),    defaultvalue=input.defaultvalue;
    if (! defaultvalue) {
      input.val (text) .addclass ("phcolor");
    }
    input.focus (function () {
      if (input.val () == text) {
        $(this) .val ("");
      }
    });
    input.blur (function () {
      if (input.val () == "") {
        $(this) .val (text) .addclass ("phcolor");
      }
    });
    //The characters entered are not gray
    input.keydown (function () {
      $(this) .removeclass ("phcolor");
    });
  };
  //When the browser does not support the placeholder property, call the placeholder function
  if (! supportplaceholder) {
    $("input"). each (function () {
      text=$(this) .attr ("placeholder");
      if ($(this) .attr ("type") == "text") {
        placeholder ($(this));
      }
    });
  }
});

After testing, the display effect of ie11placeholder can be achieved.

Method Two

The idea of ​​this method is to make an image with prompt text as the background image of the input box.Get focus at the same time and load the background image;

The background picture is as follows:

When the input box is not empty,Remove the background image;

When the input box is empty,Load background image;

When the user's keyboard keys and the input box is not empty (enter a character), remove the background image;

When the user presses the keyboard key and the input box is empty (deletes characters), the background image is loaded.

The disadvantage of this method is:you need to make a background image for each input with different prompt text,And set the input style.

The html code is unchanged.

css:

.phbg {background:url (img/bg.jpg) 0 0 no-repeat;}

js:

$(function () {
   //Determine whether the browser supports the placeholder property
   supportplaceholder="placeholder" in document.createelement ("input");
   if (! supportplaceholder) {
     //Add background image in initial state
     $("#uname"). attr ("class", "phbg");
     //initial focus
     $("#uname"). focus;
     function destyle () {
      if ($("#uname"). val ()!="") {
        $("#uname"). removeclass ("phbg");
      } else {
        $("#uname"). attr ("class", "phbg");
       }
     }
     //When the input box is empty,Add a background image;
Remove background image when it has value
     destyle ();
     $("#uname"). keyup (function () {
      //When the input box has key input and the input box is not empty,Remove the background image;
When there is a key input and it is empty (delete characters), add a background image
      destyle ();
     });
     $("#uname"). keydown (function () {
      //keydown event can remove the background image the first time the key is pressed
      $("#uname"). removeclass ("phbg");
     });
   }
});

This method ends here.

This method shows the effect under ie8 of ietester:

When getting focus:

When losing focus:

With input:

  • Previous Detailed explanation of default parameters in Javascript
  • Next Method to get address bar parameters using JavaScript