网页输入框的提示实现 placeholder

最新推荐文章于 2021-06-23 19:26:08 发布

trgoofi

最新推荐文章于 2021-06-23 19:26:08 发布

阅读量2.2k

点赞数

分类专栏： jQuery 文章标签： function input javascript html5 class html

本文链接：https://blog.csdn.net/trgoofi/article/details/6705315

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这个功能已成为HTML5的一部分了。但5之前的版本还要自己实现

网页部分（应用部分）：

<html>
  <head>
    <title></title>
    <script type="text/javascript" src="../jslib/jquery-1.6.2.js"></script>
    <script type="text/javascript" src="../js/placeholder.js"></script>
  </head>
  <body>
    <input placeholder="placeholder here" type="text">
    <input placeholder="placeholder here" type="text">
    <input placeholder="placeholder here" type="text">
    <input type="text" value="no placeholder">
  </body>
</html>

placeholder的值为要显示的值

Javascript部分（实现部分）：

// placeholder.js

$(document).ready(
  function() {
    var placeholderCss = '<style media="screen" type="text/css">'
                        + '.placeholder { color: #a1a1a1; font-style: italic; }'
                       + '</style>';
    $("head").append(placeholderCss);
    trgoofi.placeholder("placeholder", "placeholder");
  });

(function() {
  var trgoofi = {
    // placeholderClassName: class name that define the css to control the style
    // attributeName: attribute name in the input field
    placeholder : function(placeholderClassName, attributeName) {
      $("input").each(function() {
        var $this = $(this);
        if ($this.attr(attributeName) != undefined) {
          // deactivate placeholder
          $this.focus(function() {
            if ($this.val() == $this.attr(attributeName)) {
              $this.removeClass(placeholderClassName);
              $this.val("");
            }
          });
          // activate placeholder
          $this.blur(function() {
            if ($this.val() == "") {
              $this.addClass(placeholderClassName);
              $this.val($this.attr(attributeName));
            }
          });
          // initialize placeholder
          $this.blur();
        }
      });
    }
  };
  window.trgoofi = trgoofi;
})();