jQuery如何封装输入框插件


Posted in Javascript onAugust 19, 2016

【前言】

在大型项目的开发中,插件化是一种趋势,将相似的多次使用的东西封装成公共的插件,以提高开发效率。其他开发人员在调用插件的时候,只需简单的一两行代码就可以实现非常复杂的内容或者效果。

在这一节里面我就跟大家分享一下,我是如何封装一个输入框插件的。

【呈现分析】

(1)默认展示:边框为灰色,中间有输入提示信息

jQuery如何封装输入框插件

(2)获取焦点:边框为蓝色,无输入内容时中间有输入提示信息,有输入内容的时候中间显示输入内容

jQuery如何封装输入框插件

jQuery如何封装输入框插件

(3)失去焦点:输入正确边框变成浅绿色,并有个√;输入错误,边框变红,并有个×

jQuery如何封装输入框插件

jQuery如何封装输入框插件

【功能分析】

私有方法:不对外体现,插件内部自己调用;

公有方法:对外提供的接口,其他开发人员可以调用

(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如何封装输入框插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
关于javascript function对象那些迷惑分析
Oct 24 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 Javascript
详解JavaScript常量定义
Jan 03 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 #Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 #Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 #Javascript
AngularJS入门教程之REST和定制服务详解
Aug 19 #Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 #Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 #Javascript
jQuery增加、删除及修改select option的方法
Aug 19 #Javascript
You might like
PR值查询 | PageRank 查询
2006/12/20 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
Python中的字典与成员运算符初步探究
2015/10/13 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
ECHT官方网站:男女健身服
2020/02/14 全球购物
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
爱耳日活动总结
2014/04/30 职场文书
改革共识倡议书
2014/08/29 职场文书
美丽心灵观后感
2015/06/01 职场文书
少年犯观后感
2015/06/11 职场文书
CAD实训总结范文
2015/08/03 职场文书
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技
详解PyTorch模型保存与加载
2022/04/28 Python