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 相关文章推荐
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
常用jQuery选择器总结
Jul 11 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 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
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
JavaScript 继承的实现
2009/07/09 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
Vue路由前后端设计总结
2019/08/06 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
Python模块学习 datetime介绍
2012/08/27 Python
python获得文件创建时间和修改时间的方法
2015/06/30 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
护士试用期自我鉴定
2014/02/08 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
人事专员岗位说明书
2014/07/29 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
党员民主评议个人总结
2014/10/20 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电