a√天堂网,色老头综合网,9l视频自拍九色9l视频成人

全站頭部文字我要出現(xiàn)在這里

jQuery如何封裝輸入框插件 717 2024-02-21

【前言】

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

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

【呈現(xiàn)分析】

（1）默認(rèn)展示：邊框?yàn)榛疑虚g有輸入提示信息

查看圖片

（2）獲取焦點(diǎn)：邊框?yàn)樗{(lán)色，無輸入內(nèi)容時中間有輸入提示信息，有輸入內(nèi)容的時候中間顯示輸入內(nèi)容

查看圖片

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

查看圖片

【功能分析】

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

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

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

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

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

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

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

（6）設(shè)置大小（公有方法）：其他開發(fā)人員根據(jù)需要，可以通過此方法改變輸入框的大小

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

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

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

（10）默認(rèn)值（公有方法）：當(dāng)其他開發(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ā)者手動編寫，其實(shí)就是使用jQuery將第一步的三行HTML接口寫出來，寫的挺多，其實(shí)功能就一個(*^__^*) ……

_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)輸入框只讀的話，是不需要綁定事件的

// 綁定事件
_initEvent: function() {
var _this = this;
// 獲取焦點(diǎn)focus,失去焦點(diǎn)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) {
// 必填項(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ī)則，來校驗(yàn)輸入內(nèi)容的正確性

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

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

//檢驗(yàn)輸入框輸入長度
_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('-');
//當(dāng)前值長度小于設(shè)定范圍
if (parseInt(valueRange[0], 10) > currentLength) {
lengthFlag = false;
}
//當(dāng)前值長度大于設(shè)定范圍，屏蔽輸入
if (currentLength > parseInt(valueRange[1], 10)) {
_this.setValue(_this.getValue().substring(0, parseInt(valueRange[1], 10)));
}
} else if (/^d+$/.test(inputLength)) {
// 固定長度
// 當(dāng)前長度不等于設(shè)定長度
if (currentLength !== parseInt(inputLength, 10)) {
lengthFlag = false;
}
}
// 長度不在區(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)，正確，錯誤，失去焦點(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è)置輸入框大小：提供了簡單的接口設(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 = {
// 輸入框類型：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如何封裝輸入框插件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對綠夏網(wǎng)網(wǎng)站的支持！

#免責(zé)聲明#

本站[綠夏技術(shù)導(dǎo)航]提供的一切軟件、教程和內(nèi)容信息僅限用于學(xué)習(xí)和研究目的；不得將上述內(nèi)容用于商業(yè)或者非法用途，否則，一切后果請用戶自負(fù)。本站信息來自網(wǎng)絡(luò)收集整理，版權(quán)爭議與本站無關(guān)。您必須在下載后的24個小時之內(nèi)，從您的電腦或手機(jī)中徹底刪除上述內(nèi)容。如果您喜歡該程序或內(nèi)容，請支持正版，購買注冊，得到更好的正版服務(wù)。我們非常重視版權(quán)問題，如有侵權(quán)請郵件[admin@lxwl520.com]與我們聯(lián)系進(jìn)行刪除處理。敬請諒解！

文章分類