网页输入框的提示实现 placeholder

来源：互联网发布：sql server2000 win7 编辑：程序博客网时间：2024/04/29 16:08

这个功能已成为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;})();