jQuery如何封裝輸入框插件
【前言】
在大型項目的開發(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結構，使用jQuery動態(tài)的將其繪制出來。
（2）焦點事件（私有方法）：給輸入框綁定移入移出等事件，不同的狀態(tài)輸入框應該做出不同的呈現(xiàn)。
（3）合法性檢驗（私有方法）：根據(jù)輸入的內(nèi)容，校驗輸入的合法性，并給出提示。
（4）長度校驗（私有方法）：根據(jù)輸入的內(nèi)容，校驗輸入的長度，并給出提示。
（5）狀態(tài)展現(xiàn)（私有方法）：根據(jù)校驗的結果（正確，錯誤，失去焦點，獲得焦點），展現(xiàn)不同的狀態(tài)
（6）設置大小（公有方法）：其他開發(fā)人員根據(jù)需要，可以通過此方法改變輸入框的大小
（7）置灰功能（公有方法）：有時候我們需要將輸入框置灰，禁止用戶對其值進行改變。
（8）值獲?。ü蟹椒ǎ狠斎肟蜃钪匾漠斎皇抢锩娴闹道?，這個方法必須要提供給其他開發(fā)者調(diào)用啦。
（9）值重置（公有方法）：很多時候，我們需要將輸入框的賦予初始值，比如剛進入頁面的時候，所以這個方法也是必不可少啦。
（10）默認值（公有方法）：當其他開發(fā)者需要定制化輸入框時候調(diào)用。
【開發(fā)步驟】
（1）繪制簡單的DOM
在我們封裝一個組件前，我們最好將其html結構寫出來，這樣有利于我們封裝的時候快速的布局。根據(jù)上面的需求其DOM結構如下：
<div class="input_container"> <input type="text" class="input_text input_text_blur" placeholder=""> <div class="input_result"></div> </div>
（2）初始化插件：將常用值存儲起來，同時調(diào)用繪制輸入框DOM結構的函數(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結構
_this._initInputDom();
},
（3）初始化輸入框DOM結構：使用jQuery動態(tài)生成DOM結構，避免其他開發(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ù)校驗的結果，顯示不同的狀態(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)站的支持！
相關文章
ajax頁面無刷新 IE下遭遇Ajax緩存導致數(shù)據(jù)不更新的問題
在做ajax頁面無刷新添加的時候，IE下遭遇Ajax緩存，因為剛開始并不知道IE有這個壞毛病，折騰好久，終于解決問題,曬出來和大家分享，希望可以幫助你們2012-12-12
這篇文章介紹了jQuery操作屬性值的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
Jquery實現(xiàn)網(wǎng)頁跳轉(zhuǎn)或用命令打開指定網(wǎng)頁的解決方法
本篇文章是對使用Jquery實現(xiàn)網(wǎng)頁跳轉(zhuǎn)或用命令打開指定網(wǎng)頁的解決方法進行了詳細的分析介紹，需要的朋友可以參考下2013-07-07
jQuery搜索框效果實現(xiàn)代碼(百度關鍵詞聯(lián)想)
這篇文章主要介紹了jQuery搜索框效果實現(xiàn)代碼，百度關鍵詞聯(lián)想，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了EasyUI中在表單提交之前進行驗證的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
提交表單的方法有很多，想必大家都知道一些吧，下面為大家講解下使用ajax的方式提交整個表單，具體實現(xiàn)如下，有此需求的朋友可以參考下，希望對大家有所幫助2013-08-08
JQuery對class屬性的操作實現(xiàn)按鈕開關效果
頁面中的按鈕開關效果想必大家都有見到過吧，接下來為大家詳細介紹下如何使用JQuery對class屬性的操作方法實現(xiàn)，感興趣的朋友不要錯過2013-10-10
這篇文章主要介紹了jQuery常用的4種加載方式,結合實例形式分析了jQuery在頁面加載之前與加載之后執(zhí)行的4種常用加載方式,需要的朋友可以參考下2016-07-07
本章節(jié)介紹一下在谷歌瀏覽器下利用jquery無法獲取圖片尺寸的現(xiàn)象，而在IE和火狐瀏覽器下能夠正常獲得，當然也不是任何時候都無法獲取圖片尺寸，下面給大家介紹遇到此問題該如何解決2015-09-09
這篇文章主要介紹了15個jquery常用方法、小技巧分享,本文總結了一些開發(fā)中常用的方法,例如獲取td的行標和列標、判斷是否是回車按下、全選和反選等,需要的朋友可以參考下2015-01-01