jQuery如何封裝輸入框插件

更新時間：2016年08月19日 11:05:09 作者：宋小玉

這篇文章主要介紹了jQuer輸入框插件封裝方法，這樣可以提高程序員的開發(fā)效率，非常不錯，具有參考借鑒價值，需要的朋友可以參考下

【前言】

　　在大型項目的開發(fā)中，插件化是一種趨勢，將相似的多次使用的東西封裝成公共的插件，以提高開發(fā)效率。其他開發(fā)人員在調(diào)用插件的時候，只需簡單的一兩行代碼就可以實現(xiàn)非常復雜的內(nèi)容或者效果。

　　在這一節(jié)里面我就跟大家分享一下，我是如何封裝一個輸入框插件的。

【呈現(xiàn)分析】

（1）默認展示：邊框為灰色，中間有輸入提示信息

（2）獲取焦點：邊框為藍色，無輸入內(nèi)容時中間有輸入提示信息，有輸入內(nèi)容的時候中間顯示輸入內(nèi)容

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

【功能分析】

私有方法：不對外體現(xiàn)，插件內(nèi)部自己調(diào)用；

公有方法：對外提供的接口，其他開發(fā)人員可以調(diào)用

（1）繪制DOM（私有方法）：根據(jù)呈現(xiàn)分析里面的html結(jié)構(gòu)，使用jQuery動態(tài)的將其繪制出來。

（2）焦點事件（私有方法）：給輸入框綁定移入移出等事件，不同的狀態(tài)輸入框應該做出不同的呈現(xiàn)。

（3）合法性檢驗（私有方法）：根據(jù)輸入的內(nèi)容，校驗輸入的合法性，并給出提示。

（4）長度校驗（私有方法）：根據(jù)輸入的內(nèi)容，校驗輸入的長度，并給出提示。

（5）狀態(tài)展現(xiàn)（私有方法）：根據(jù)校驗的結(jié)果（正確，錯誤，失去焦點，獲得焦點），展現(xiàn)不同的狀態(tài)

（6）設置大?。ü蟹椒ǎ浩渌_發(fā)人員根據(jù)需要，可以通過此方法改變輸入框的大小

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

（8）值獲取（公有方法）：輸入框最重要的當然是里面的值啦，這個方法必須要提供給其他開發(fā)者調(diào)用啦。

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

（10）默認值（公有方法）：當其他開發(fā)者需要定制化輸入框時候調(diào)用。

【開發(fā)步驟】

（1）繪制簡單的DOM

　　在我們封裝一個組件前，我們最好將其html結(jié)構(gòu)寫出來，這樣有利于我們封裝的時候快速的布局。根據(jù)上面的需求其DOM結(jié)構(gòu)如下：

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

（2）初始化插件：將常用值存儲起來，同時調(diào)用繪制輸入框DOM結(jié)構(gòu)的函數(shù)

// 初始化插件
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結(jié)構(gòu)
_this._initInputDom();
},

（3）初始化輸入框DOM結(jié)構(gòu)：使用jQuery動態(tài)生成DOM結(jié)構(gòu)，避免其他開發(fā)者手動編寫，其實就是使用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）值正確性校驗：通過讀取輸入框值的規(guī)則，來校驗輸入內(nèi)容的正確性

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

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

//檢驗輸入框輸入長度
_checkLenght: function() {
var _this = this,
inputLength = _this.length,
//8-32這種格式的范圍
currentLength = _this.getValue().length,
// 長度是否在范圍內(nèi)
lengthFlag = true;
if (/^\d+-\d+$/.test(inputLength)) {
// 區(qū)間范圍
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;
}
}
// 長度不在區(qū)間飄紅
if (!lengthFlag) {
_this._setStatus(_this.input, 'error');
} else {
_this._setStatus(_this.input, 'focus');
}
},

（7）設置輸入框狀態(tài)：根據(jù)校驗的結(jié)果，顯示不同的狀態(tài)

//設置輸入框狀態(tài)，正確，錯誤，失去焦點，獲得焦點
_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）設置輸入框大?。禾峁┝撕唵蔚慕涌谠O置輸入框的大小small,big,或者數(shù)字

//設置輸入框大小
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）置灰操作：禁止輸入任何內(nèi)容

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

（10）獲取值，重置值實現(xiàn)

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

（11）定制化輸入框接口

// 默認參數(shù)
$.fn.CreateInput.defaultValue = {
// 輸入框類型：text,password
type: "text",
//輸入框規(guī)則
spec: null,
//長度
length: null,
//描述輸入字段
placeholder: null,
//是否必填
isRequired: false
};

【如何調(diào)用】

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

以上所述是小編給大家介紹的jQuery如何封裝輸入框插件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: