input文本框默认提示

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

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>

展开插件

转载于:https://www.cnblogs.com/cymmint/p/4208700.html