您的位置：首页 > Web前端 > JQuery

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

2011-12-26 07:47 381 查看

(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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航