jQuery輸入框外掛程式

標籤：

【前言】

　　在大型項目的開發中，外掛程式化是一種趨勢，將相似的多次使用的東西封裝成公用的外掛程式，以提高開發效率。其他開發人員在調用外掛程式的時候，只需簡單的一兩行代碼就可以實現非常複雜的內容或者效果。

　　在這一節裡面我就跟大家分享一下，我是如何封裝一個輸入框外掛程式的。

【呈現分析】

（1）預設展示：邊框為灰色，中間有輸入提示資訊

 

（2）擷取焦點：邊框為藍色，無輸入內容時中間有輸入提示資訊，有輸入內容的時候中間顯示輸入內容

 

 

（3）失去焦點：輸入正確邊框變成淺綠色，並有個√；輸入錯誤，邊框變紅，並有個×

 

 

【功能分析】

私人方法：不對外體現，外掛程式內部自己調用；

公有方法：對外提供的介面，其他開發人員可以調用

（1）繪製DOM（私人方法）：根據呈現分析裡面的html結構，使用jQuery動態將其繪製出來。

（2）焦時間點事件（私人方法）：給輸入框綁定移入移出等事件，不同的狀態輸入框應該做出不同的呈現。

（3）合法性檢驗（私人方法）：根據輸入的內容，校正輸入的合法性，並給出提示。

（4）長度校正（私人方法）：根據輸入的內容，校正輸入的長度，並給出提示。

（5）狀態展現（私人方法）：根據校正的結果（正確，錯誤，失去焦點，獲得焦點），展現不同的狀態

（6）設定大小（公有方法）：其他開發人員根據需要，可以通過此方法改變輸入框的大小

       

（7）置灰功能（公有方法）：有時候我們需要將輸入框置灰，禁止使用者對其值進行改變。

（8）值擷取（公有方法）：輸入框最重要的當然是裡面的值啦，這個方法必須要提供給其他開發人員調用啦。

（9）值重設（公有方法）：很多時候，我們需要將輸入框的賦予初始值，比如剛進入頁面的時候，所以這個方法也是必不可少啦。

（10）預設值（公有方法）：當其他開發人員需要定製化輸入框時候調用。

【開發步驟】

（1）繪製簡單的DOM

　　在我們封裝一個組件前，我們最好將其html結構寫出來，這樣有利於我們封裝的時候快速的布局。根據上面的需求其DOM結構如下：

<div class="input_container">    <input type="text" class="input_text input_text_blur" placeholder="">    <div class="input_result"></div></div>

 （2）初始化外掛程式：將常用值儲存起來，同時調用繪製輸入框DOM結構的函數

// 初始化外掛程式init: function() {    // 常用值儲存    var _this = this;    _this.type = _this.settings.type;    _this.spec = _this.settings.spec;    _this.length = _this.settings.length;    _this.placeholder = _this.settings.placeholder;    _this.isRequired = _this.settings.isRequired;    // 初始化輸入框DOM結構    _this._initInputDom();},

（3）初始化輸入框DOM結構：使用jQuery動態產生DOM結構，避免其他開發人員手動編寫，其實就是使用jQuery將第一步的三行HTML介面寫出來，寫的挺多，其實功能就一個(*^__^*) ……

_initInputDom: function() {    var _this = this,        inputContainer = $(‘<div></div>‘),        inputContent = $(‘<input type="‘ + _this.type + ‘">‘),        inputResult = $(‘<div></div>‘);    inputContainer.addClass(‘input_container‘);    inputContent.addClass(‘input_text input_text_blur‘);    inputResult.addClass(‘input_result‘);    inputContainer.append(inputContent);    inputContainer.append(inputResult);    _this.element.append(inputContainer);    // 記錄當前需要操作的dom    _this.input = _this.element.find(‘input‘);    _this.container = _this.element.find(‘.input_container‘);    if (_this.placeholder !== null) {        //placeholder提示資訊        _this.input.prop(‘placeholder‘, _this.placeholder);    }    _this._initEvent();},

 （4）綁定事件：擷取焦點focus，失去焦點blur，值改變change，需要注意一點，就是當輸入框唯讀話，是不需要綁定事件的

// 綁定事件_initEvent: function() {    var _this = this;    // 擷取焦點focus,失去焦點blur,值改變change    // 如果輸入框唯讀話就不操作    _this.input.focus(function() {        if (!$(this).attr(‘readonly‘)) {            _this._setStatus(this, ‘focus‘);        }    }).blur(function() {        if (!$(this).attr(‘readonly‘)) {            if (_this.getValue() === ‘‘) {                if (_this.isRequired) {                    // 必填項失去焦點                    _this._setStatus(this, ‘error‘);                } else {                    // 非必填項失去焦點                    _this._setStatus(this, ‘blur‘);                }            } else {                // 有值得情況直接進行值校正                if (_this._checkSpec()) {                    _this._setStatus(this, ‘right‘);                } else {                    _this._setStatus(this, ‘error‘);                }            }        }    }).keyup(function() {        _this._checkLenght();    });;},

（5）值正確性校正：通過讀取輸入框值的規則，來校正輸入內容的正確性

//校正輸入框輸入內容_checkSpec: function() {    var _this = this;    return _this.spec.test(_this.getValue());},

（6）長度校正：通過讀取輸入框值的長度規則，來校正輸入長度的正確性

//檢驗輸入框輸入長度_checkLenght: function() {    var _this = this,        inputLength = _this.length,        //8-32這種格式的範圍        currentLength = _this.getValue().length,        // 長度是否在範圍內        lengthFlag = true;    if (/^\d+-\d+$/.test(inputLength)) {        // 區間範圍        var valueRange = inputLength.split(‘-‘);        //當前值長度小於定義範圍        if (parseInt(valueRange[0], 10) > currentLength) {            lengthFlag = false;        }        //當前值長度大於定義範圍，屏蔽輸入        if (currentLength > parseInt(valueRange[1], 10)) {            _this.setValue(_this.getValue().substring(0, parseInt(valueRange[1], 10)));        }    } else if (/^\d+$/.test(inputLength)) {        // 固定長度        // 當前長度不等於設定長度        if (currentLength !== parseInt(inputLength, 10)) {            lengthFlag = false;        }    }    // 長度不在區間飄紅    if (!lengthFlag) {        _this._setStatus(_this.input, ‘error‘);    } else {        _this._setStatus(_this.input, ‘focus‘);    }},

（7）設定輸入框狀態：根據校正的結果，顯示不同的狀態

//設定輸入框狀態，正確，錯誤，失去焦點，獲得焦點_setStatus: function(inputObj, status) {    $(inputObj).removeClass(‘input_text_focus input_text_blur input_text_right input_text_error‘);    $(inputObj).siblings(‘.input_result‘).removeClass(‘input_result_right input_result_error‘);    if (status === "right") {        $(inputObj).addClass(‘input_text_right‘);        $(inputObj).siblings(‘.input_result‘).addClass(‘input_result_right‘).text(‘√‘);    } else if (status === "error") {        $(inputObj).addClass(‘input_text_error‘)        $(inputObj).siblings(‘.input_result‘).addClass(‘input_result_error‘).text(‘ב);    } else if (status === "blur") {        $(inputObj).addClass(‘input_text_blur‘);    } else if (status === "focus") {        $(inputObj).addClass(‘input_text_focus‘);    }},

（8）設定輸入框大小：提供了簡單的介面設定輸入框的大小small,big,或者數字

//設定輸入框大小setSize: function(size) {    var _this = this;    var scaleSize = 1;    if (size === ‘small‘) {        scaleSize = 0.8;    } else if (size === ‘big‘) {        scaleSize = 1.2;    } else if (parseInt(size, 10) !== NaN) {        scaleSize = parseInt(size, 10)    };    _this.container.css(‘transform‘, ‘scale(‘ + scaleSize + ‘)‘);},

（9）置灰操作：禁止輸入任何內容

//輸入框置灰setGrey: function(flag) {    var _this = this;    if (flag) {        _this.input.prop(‘readonly‘, ‘‘);    } else {        _this.input.removeAttr(‘readonly‘);    }},

（10）擷取值，重設值實現

//擷取輸入框值getValue: function() {        return this.input.val();    },//設定輸入框值setValue: function(str) {    this.input.val(str);}

 （11）定製化輸入框介面

// 預設參數$.fn.CreateInput.defaultValue = {    // 輸入框類型：text,password    type: "text",    //輸入框規則    spec: null,    //長度    length: null,    //描述輸入欄位    placeholder: null,    //是否必填    isRequired: false};

 

【如何調用】

//產生輸入框$("#username").CreateInput({    type: "text",    spec: /^[0-9]\d*$/,    length: ‘5-8‘,    placeholder: ‘不可為空，只能輸入數字，長度為5-8‘,    isRequired: true});//調用公有方法var myInput = $("#username").data(‘CreateInput‘);myInput.setValue("1245");

 

jQuery輸入框外掛程式