JQuery插件第十六个: 输入框默认显示内容效果

(function($) {
    $.fn.setTip = function(options) {
        var defaults = {
            defaultValue: "",
            focusColor: "#000000",
            blurColor: "#ccc",
            fontSize: "10pt"
        }
        var options = $.extend(defaults, options);
        this.each(function() {
            var thisSearch = $(this);
            thisSearch.focus(function() {
                if (thisSearch.val() == options.defaultValue) {
                    thisSearch.css("color", options.focusColor);
                    thisSearch.val("");
                }
            }).blur(function() {
            if ( thisSearch.val() === undefined || thisSearch.val() == '') {
                    thisSearch.css("color", options.blurColor);
                    thisSearch.val(options.defaultValue);
                }
            }).css({ "color": options.blurColor, "font-size": options.fontSize });
            if (thisSearch.val() == 'undefined' || thisSearch.val() == "") {
                thisSearch.val(options.defaultValue);
            } else if (thisSearch.val() != options.defaultValue) {
                thisSearch.css("color", options.focusColor);
            }
        });
    };
})(jQuery);


用来生成输入框默认显示内容,没有输入不同内容时就默认显示其内容:

<script type="text/javascript" src="jQuery.setTip.js"></script>
      <script type="text/javascript">
          $(document).ready(function () {
              $("#newInput").setTip({defaultValue:"世界,你好!"});
          });
      </script>
</head>
<body>
     <input type="text" id="newInput" >
</body>


你可能感兴趣的:(jquery,function,jquery插件,input)