Home>

The screenshot of the running effect is as follows:

The specific code is as follows:

<! Doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <title>jquery achieve placeholder effect</title>
  <script src="jquery-1.7.2.min.js"></script>
  <script>
    $(function () {
      initevent ();
    });
    //Initialize the color of the prompt content
    function initevent () {
      $("input.holder"). each (function () {
        var $this=$(this), holder=$this.data ("holder");
        if (holder) {
          $this.css ("color", "#a9a9a9"). val (holder);
        }
      });
      //Set the color and value of the content when getting focus
      $(document) .off ("focus", "input.holder"). on ("focus", "input.holder", function () {
        var $this=$(this);
        if ($this.val () === $this.data ("holder")) {
          $this.css ("color", "black"). val ("");
        }
      });
      //Restore hint content after losing focus
      $(document) .off ("focusout", "input.holder"). on ("focusout", "input.holder", function () {
        var $this=$(this);
        if ($.trim ($this.val ()) === "") {
          $this.css ("color", "#a9a9a9"). val ($this.data ("holder"));
        }
      });
    }
  </script>
</head>
<body>
  <input type="text" name="name" value="" data-holder="Please enter account" /><br><br>
  <input type="text" name="name" value="" data-holder="Please enter password" />
</body>
</html>
  • Previous AngularJS ng-mousedown directive
  • Next Simple implementation of seven cattle image processing API using Golang