jquery 小插件,完成“輸入字段預期值的提示信息”,防html5 placeholder屬性

前言:在很多時候,我們需要文本框中顯示默認值,獲取焦點時,文字框中就會清空給的值,當失去焦點時,如果沒有值,繼續顯示默認的文字,如果有輸入值,就顯示輸入的值。現在項目中需要用到這個地方的功能比較多,於是想到瞭HTML5中的placeholder屬性,但是總所周知,IE是咋們程序員心中的硬傷,不得不放棄。又不想在網上找這類似的,索性就自己寫瞭一個,現在分享出來,供大傢參考!

 

下面是插件的主要代碼:

 

 

(function ($) {

    $.fn.Placeholder = function (param) {

        var defaults = {

            defaultval: 'data-defaultval', //  <input type="text" data-defaultval="文字說嘛" />

            defaultClass: 'default_text_auto', // 樣式名稱

            tipstext: '', // 默認提示文本,如果為空則或者defaultval的值,反之

            focusClass: "block"

        }

        var $this = $(this);

 

        var options = $.extend(defaults, param);

        var defaultval = options.tipstext == "" ? $this.attr(options.defaultval) : options.tipstext;

        if (defaultval != "" && $this.val() == "") {

            // 追加文字樣式

            $this.addClass(options.defaultClass);

            // 賦值

            $this.val(defaultval);

 

            // 添加焦點事件

            $this.focus(function () {

                if ($(this).val() == defaultval) {

                    $(this).val("");

                    // 移除樣式

                    $this.removeClass(options.defaultClass);

                    $this.addClass(options.focusClass);

                }

                // 添加移開焦點事件

            }).blur(function () {

                if ($(this).val() == "" || $(this).val() == defaultval) {

                    // 賦值

                    $(this).val(defaultval);

                    // 追加文字樣式

                    $this.addClass(options.defaultClass);

                    $this.removeClass(options.focusClass);

                }

            });

        } else {

            $this.addClass(options.focusClass);

        }

    }

})(jQuery);

 

 

 

這裡是相關的的樣式

 

 View Code

 

 

代碼很簡單,調用也很簡單的:placeholder

 

 

/**

* 使用方法

* 最簡單的調用方式

* $("#").Placeholder();

* $(".").Placeholder();

* $("input[type='值']").Placeholder();

*一般調用形式

* $("").Placeholder({

*     placeholder: 'data-val',

*     defaultClass: "class",

*     tips: '測試文字'

* });

*/

 

 

You May Also Like