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

最新推荐文章于 2021-08-20 17:27:11 发布

chinet_bridge

最新推荐文章于 2021-08-20 17:27:11 发布

阅读量1.2k

点赞数

分类专栏：输入框文章标签： jquery插件 function jquery input

本文链接：https://blog.csdn.net/chinet_bridge/article/details/7102097

版权

输入框专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

chinet_bridge

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery插件第十六个: 输入框默认显示内容效果

(function($) { $.fn.setTip = function(options) { var defaults = { defaultValue: "", focusColor: "#000000", blurColor: "#ccc", fontSize
复制链接

扫一扫

专栏目录