jquery 小插件，完成「輸入字段預期值的提示信息」，防html5 placeholder屬性

時間 2019-11-19

標籤 jquery 插件完成輸入字段預期提示信息 html5 html placeholder 屬性欄目 JQuery 简体版

原文原文鏈接

前言：在不少時候，咱們須要文本框中顯示默認值，獲取焦點時，文字框中就會清空給的值，當失去焦點時，若是沒有值，繼續顯示默認的文字，若是有輸入值，就顯示輸入的值。如今項目中須要用到這個地方的功能比較多，因而想到了HTML5中的placeholder屬性，可是總所周知，IE是咋們程序員心中的硬傷，不得不放棄。又不想在網上找這相似的，索性就本身寫了一個，如今分享出來，供你們參考！javascript

下面是插件的主要代碼：css

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

這裏是相關的的樣式html

.default_placeholder{color: #C8C8C8;}
.jp_focus {color:black;}

View Code

代碼很簡單，調用也很簡單的：placeholderjava

/**
* 
* 使用方法
* 最簡單的調用方式
* $("#").Placeholder();
* $(".").Placeholder();
* $("input[type='值']").Placeholder();
* 
* 
*通常調用形式
* $("").Placeholder({
*     placeholder: 'data-val',
*     defaultClass: "class",
*     tips: '測試文字'
* });
*/

這裏是html代碼:jquery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/jquery-1.8.2.min.js"></script>
    <link href="js/jquery.placeholder/jquery.placeholder.css" rel="stylesheet" />
    <script src="js/jquery.placeholder/jquery.placeholder-1.0.0.js"></script>
    <script type="text/javascript">
        $(function () {
            // 默認
            $("#txt1").Placeholder();

            // 自定義提示信息
            $("#txt2").Placeholder({ tips: "隨便輸入點東西吧！" });

            // 自定義data-placeholder
            $("#txt3").Placeholder({ placeholder: "data-p" });

            // 初始化了value
            $("#txt4").Placeholder();
        });
    </script>
</head>
<body>
    <input id="txt1" data-placeholder="請輸入一個文本" type="text" />
    <input id="txt2" type="text" />
    <input id="txt3" data-p="自定義data-placeholder" type="text" />
    <input id="txt4" data-placeholder="請輸入一個文本" value="(初始化了value)" type="text" />
</body>
</html>