jQuery如何封裝輸入框插件
【前言】
在大型項(xiàng)目的開(kāi)發(fā)中，插件化是一種趨勢(shì)，將相似的多次使用的東西封裝成公共的插件，以提高開(kāi)發(fā)效率。其他開(kāi)發(fā)人員在調(diào)用插件的時(shí)候，只需簡(jiǎn)單的一兩行代碼就可以實(shí)現(xiàn)非常復(fù)雜的內(nèi)容或者效果。
在這一節(jié)里面我就跟大家分享一下，我是如何封裝一個(gè)輸入框插件的。
【呈現(xiàn)分析】
（1）默認(rèn)展示：邊框?yàn)榛疑?，中間有輸入提示信息
（2）獲取焦點(diǎn)：邊框?yàn)樗{(lán)色，無(wú)輸入內(nèi)容時(shí)中間有輸入提示信息，有輸入內(nèi)容的時(shí)候中間顯示輸入內(nèi)容
（3）失去焦點(diǎn)：輸入正確邊框變成淺綠色，并有個(gè)√；輸入錯(cuò)誤，邊框變紅，并有個(gè)×
【功能分析】
私有方法：不對(duì)外體現(xiàn)，插件內(nèi)部自己調(diào)用；
公有方法：對(duì)外提供的接口，其他開(kāi)發(fā)人員可以調(diào)用
（1）繪制DOM（私有方法）：根據(jù)呈現(xiàn)分析里面的html結(jié)構(gòu)，使用jQuery動(dòng)態(tài)的將其繪制出來(lái)。
（2）焦點(diǎn)事件（私有方法）：給輸入框綁定移入移出等事件，不同的狀態(tài)輸入框應(yīng)該做出不同的呈現(xiàn)。
（3）合法性檢驗(yàn)（私有方法）：根據(jù)輸入的內(nèi)容，校驗(yàn)輸入的合法性，并給出提示。
（4）長(zhǎng)度校驗(yàn)（私有方法）：根據(jù)輸入的內(nèi)容，校驗(yàn)輸入的長(zhǎng)度，并給出提示。
（5）狀態(tài)展現(xiàn)（私有方法）：根據(jù)校驗(yàn)的結(jié)果（正確，錯(cuò)誤，失去焦點(diǎn)，獲得焦點(diǎn)），展現(xiàn)不同的狀態(tài)
（6）設(shè)置大?。ü蟹椒ǎ浩渌_(kāi)發(fā)人員根據(jù)需要，可以通過(guò)此方法改變輸入框的大小
（7）置灰功能（公有方法）：有時(shí)候我們需要將輸入框置灰，禁止用戶(hù)對(duì)其值進(jìn)行改變。
（8）值獲?。ü蟹椒ǎ狠斎肟蜃钪匾漠?dāng)然是里面的值啦，這個(gè)方法必須要提供給其他開(kāi)發(fā)者調(diào)用啦。
（9）值重置（公有方法）：很多時(shí)候，我們需要將輸入框的賦予初始值，比如剛進(jìn)入頁(yè)面的時(shí)候，所以這個(gè)方法也是必不可少啦。
（10）默認(rèn)值（公有方法）：當(dāng)其他開(kāi)發(fā)者需要定制化輸入框時(shí)候調(diào)用。
【開(kāi)發(fā)步驟】
（1）繪制簡(jiǎn)單的DOM
在我們封裝一個(gè)組件前，我們最好將其html結(jié)構(gòu)寫(xiě)出來(lái)，這樣有利于我們封裝的時(shí)候快速的布局。根據(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）初始化插件：將常用值存儲(chǔ)起來(lái)，同時(shí)調(diào)用繪制輸入框DOM結(jié)構(gòu)的函數(shù)
// 初始化插件
init: function() {
// 常用值存儲(chǔ)
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動(dòng)態(tài)生成DOM結(jié)構(gòu)，避免其他開(kāi)發(fā)者手動(dòng)編寫(xiě)，其實(shí)就是使用jQuery將第一步的三行HTML接口寫(xiě)出來(lái)，寫(xiě)的挺多，其實(shí)功能就一個(gè)(*^__^*) ……
_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);
// 記錄當(dāng)前需要操作的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）綁定事件：獲取焦點(diǎn)focus，失去焦點(diǎn)blur，值改變change，需要注意一點(diǎn)，就是當(dāng)輸入框只讀的話(huà)，是不需要綁定事件的
// 綁定事件
_initEvent: function() {
var _this = this;
// 獲取焦點(diǎn)focus,失去焦點(diǎn)blur,值改變change
// 如果輸入框只讀的話(huà)就不操作
_this.input.focus(function() {
if (!$(this).attr('readonly')) {
_this._setStatus(this, 'focus');
}
}).blur(function() {
if (!$(this).attr('readonly')) {
if (_this.getValue() === '') {
if (_this.isRequired) {
// 必填項(xiàng)失去焦點(diǎn)
_this._setStatus(this, 'error');
} else {
// 非必填項(xiàng)失去焦點(diǎn)
_this._setStatus(this, 'blur');
}
} else {
// 有值得情況直接進(jìn)行值校驗(yàn)
if (_this._checkSpec()) {
_this._setStatus(this, 'right');
} else {
_this._setStatus(this, 'error');
}
}
}
}).keyup(function() {
_this._checkLenght();
});;
},
（5）值正確性校驗(yàn)：通過(guò)讀取輸入框值的規(guī)則，來(lái)校驗(yàn)輸入內(nèi)容的正確性
//校驗(yàn)輸入框輸入內(nèi)容
_checkSpec: function() {
var _this = this;
return _this.spec.test(_this.getValue());
},
（6）長(zhǎng)度校驗(yàn)：通過(guò)讀取輸入框值的長(zhǎng)度規(guī)則，來(lái)校驗(yàn)輸入長(zhǎng)度的正確性
//檢驗(yàn)輸入框輸入長(zhǎng)度
_checkLenght: function() {
var _this = this,
inputLength = _this.length,
//8-32這種格式的范圍
currentLength = _this.getValue().length,
// 長(zhǎng)度是否在范圍內(nèi)
lengthFlag = true;
if (/^\d+-\d+$/.test(inputLength)) {
// 區(qū)間范圍
var valueRange = inputLength.split('-');
//當(dāng)前值長(zhǎng)度小于設(shè)定范圍
if (parseInt(valueRange[0], 10) > currentLength) {
lengthFlag = false;
}
//當(dāng)前值長(zhǎng)度大于設(shè)定范圍，屏蔽輸入
if (currentLength > parseInt(valueRange[1], 10)) {
_this.setValue(_this.getValue().substring(0, parseInt(valueRange[1], 10)));
}
} else if (/^\d+$/.test(inputLength)) {
// 固定長(zhǎng)度
// 當(dāng)前長(zhǎng)度不等于設(shè)定長(zhǎng)度
if (currentLength !== parseInt(inputLength, 10)) {
lengthFlag = false;
}
}
// 長(zhǎng)度不在區(qū)間飄紅
if (!lengthFlag) {
_this._setStatus(_this.input, 'error');
} else {
_this._setStatus(_this.input, 'focus');
}
},
（7）設(shè)置輸入框狀態(tài)：根據(jù)校驗(yàn)的結(jié)果，顯示不同的狀態(tài)
//設(shè)置輸入框狀態(tài)，正確，錯(cuò)誤，失去焦點(diǎn)，獲得焦點(diǎn)
_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）設(shè)置輸入框大?。禾峁┝撕?jiǎn)單的接口設(shè)置輸入框的大小small,big,或者數(shù)字
//設(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）獲取值，重置值實(shí)現(xiàn)
//獲取輸入框值
getValue: function() {
return this.input.val();
},
//設(shè)置輸入框值
setValue: function(str) {
this.input.val(str);
}
（11）定制化輸入框接口
// 默認(rèn)參數(shù)
$.fn.CreateInput.defaultValue = {
// 輸入框類(lèi)型：text,password
type: "text",
//輸入框規(guī)則
spec: null,
//長(zhǎng)度
length: null,
//描述輸入字段
placeholder: null,
//是否必填
isRequired: false
};
【如何調(diào)用】
//生成輸入框
$("#username").CreateInput({
type: "text",
spec: /^[0-9]\d*$/,
length: '5-8',
placeholder: '不能為空，只能輸入數(shù)字，長(zhǎng)度為5-8',
isRequired: true
});
//調(diào)用公有方法
var myInput = $("#username").data('CreateInput');
myInput.setValue("1245");
以上所述是小編給大家介紹的jQuery如何封裝輸入框插件，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- jquery實(shí)用技巧之輸入框提示語(yǔ)句
- jQuery實(shí)現(xiàn)手機(jī)自定義彈出輸入框
- jQuery點(diǎn)擊輸入框顯示驗(yàn)證碼圖片
- 基于Bootstrap使用jQuery實(shí)現(xiàn)輸入框組input-group的添加與刪除
- Jquery動(dòng)態(tài)添加輸入框的方法
- jquery控制表單輸入框顯示默認(rèn)值的方法
- js與jquery實(shí)時(shí)監(jiān)聽(tīng)輸入框值的oninput與onpropertychange方法
- jquery實(shí)現(xiàn)textarea輸入框限制字?jǐn)?shù)的方法
- jquery實(shí)現(xiàn)input輸入框?qū)崟r(shí)輸入觸發(fā)事件代碼
相關(guān)文章
這篇文章主要介紹了jQuery中:not選擇器用法,以實(shí)例形式分析了:not選擇器的功能、定義及移除元素的用法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jQuery使用$獲取對(duì)象后檢查該對(duì)象是否存在的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jQuery使用$獲取對(duì)象后檢查該對(duì)象是否存在的實(shí)現(xiàn)方法。小編覺(jué)而挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
jQuery LigerUI 插件介紹及使用之ligerDrag和ligerResizable示例代碼打包
jQuery LigerUI 插件介紹及使用之ligerDrag和ligerResizable使用。2011-04-04
jQuery 隔行換色 支持鍵盤(pán)上下鍵，按Enter選定值
jQuery 隔行換色 支持鍵盤(pán)上下鍵，按Enter選定值2009-08-08
jquery實(shí)現(xiàn)全選、不選、反選的兩種方法
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)全選、不選、反選的兩種方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
jQuery實(shí)現(xiàn)文件上傳進(jìn)度條特效
帶進(jìn)度條的文件上傳特效，每個(gè)文件都有進(jìn)度條，都有上傳詳情介紹。效果非常不錯(cuò)，這里推薦給大家。2015-08-08
jQuery圖片前后對(duì)比插件beforeAfter用法示例【附demo源碼下載】
這篇文章主要介紹了jQuery圖片前后對(duì)比插件beforeAfter用法,結(jié)合實(shí)例形式分析了beforeAfter插件的功能、參數(shù)用法與使用技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
基于jquery+thickbox仿校內(nèi)登錄注冊(cè)框
近日，客戶(hù)說(shuō)他想要個(gè)類(lèi)似于人人網(wǎng)（以前為校內(nèi)）的登錄框效果，于是上網(wǎng)搜了下，發(fā)現(xiàn)有一個(gè)仿得比較好的，于是就拿過(guò)來(lái)用了用。2010-06-06
jQuery 中關(guān)于CSS操作部分使用說(shuō)明
jQuery 中關(guān)于CSS操作部分使用說(shuō)明...2007-06-06
詳解jQuery向動(dòng)態(tài)生成的內(nèi)容添加事件響應(yīng)jQuery live()方法
這篇文章主要介紹了jQuery向動(dòng)態(tài)生成的內(nèi)容添加事件響應(yīng)jQuery live()方法，需要的朋友可以參考下2015-11-11