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 相关文章推荐
妙用Jquery的val()方法
Jun 27 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 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获取Google AJAX Search API 数据的代码
2010/03/12 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
在Python的Django框架中创建语言文件
2015/07/27 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
python匿名函数用法实例分析
2019/08/03 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
python numpy实现rolling滚动案例
2020/06/08 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
大学生素质拓展活动方案
2014/02/11 职场文书
检讨书怎么写
2015/05/07 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android
Redis实现一个账号只能登录一个设备
2022/04/19 Redis
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers