input文本框默认提示

跟風遠走 提交于 2020-02-16 01:52:50

今天闲暇时间把自己以前写的一个文本框默认提示函数改成了一个小插件。下面是代码

1、引入jQuery库

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

 

2、HTML测试文本框

<input type="text" value="请输入地址" />

 

3、调用方式

<script>
$(function(){
    $("input").textboxHint({
        focc : "#f00",
        txt : "请输入"
    });
});
</script>

 

4、文本框插件

<script>
/***
 * Copyright (c) 2015 http://www.cnblogs.com/cymmint/
 * Ver: textboxHint() 0.1
 * Date: 2015-01-07
 * Author: cymmint
 * Function: 文本框默认值提示文件设置
 */
(function($){
    $.fn.textboxHint = function(opts){
        var defaults = {
            txt  : "",
            defc : "#999",
            focc : "#333"
        }
        
        var opts = $.extend(defaults, opts);
        
        return this.each(function(){
            var self = $(this),
                txt  = opts.txt != "" ? opts.txt : self.val();

            self.val(txt).css("color", opts.defc);
            self.on("focus", function(){
                if(self.val() == "" || self.val() == txt) {
                    self.val("");
                }
                self.css("color", opts.focc);
            });
            self.on("blur", function(){
                if(self.val() == "" || self.val() == txt) {
                    self.val(txt).css("color", opts.defc);
                }
            });
        });
    }
})(jQuery);
</script>
展开插件
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!