jQuery如何封装输入框插件

[前言]

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

在本节中，我将与您分享我如何打包输入框插件。

[演示分析]

(1)默认显示：边框为灰色，中间为输入提示信息

(2)获取焦点：边框为蓝色，没有输入内容时中间有输入提示信息，有输入内容时中间显示输入内容。

(3)失焦：输入正确的帧，用变成浅绿色；输入错误，边框变红，出现

[功能分析]

私有方法：不在外部反映，而是由插件调用；

公共方法：其他开发人员可以调用的外部接口

(1)绘制DOM(私有方法):根据呈现分析中的html结构，使用jQuery动态绘制。

(2)焦点事件(private方法):移入移出等事件绑定到输入框，不同的状态输入框应该有不同的呈现方式。

(3)合法性检查(私法):根据输入内容，检查输入的有效性并给出提示。

(4)长度检查(私法):根据输入内容，检查输入长度并给出提示。

(5)状态呈现(私有方法):根据验证结果(正确、错误、失焦、获焦)，呈现不同的状态

(6)设置大小(公共方法):其他开发者可以根据自己的需要改变输入框的大小。

(7)灰色设置功能(公共方法):有时我们需要将输入框灰化，禁止用户更改其值。

(8)价值获取(公共方法):当然输入框中最重要的是里面的价值。此方法必须提供给其他开发人员调用。

(9)值重置(public方法):很多情况下，我们需要给输入框赋予初始值，比如我们第一次进入页面的时候，那么这个方法也是必须的。

(10)默认值(public方法):当其他开发人员需要自定义输入框时调用。

[开发步骤]

(1)绘制一个简单的DOM

在封装一个组件之前，我们最好写出它的html结构，这样有利于封装时的快速布局。根据上述要求，其DOM结构如下：

Div class=' input _ container '输入类型=' text ' class=' input _ text input _ text _ blur '占位符=' div class=' input _ result '/div/div(2)初始化插件：存储常用值，调用绘制输入框DOM结构的函数

//初始化插件init:函数(){//公共值存储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。_ initinPuttom()；}，(3)初始化输入框的DOM结构：使用jQuery动态生成DOM结构，避免其他开发人员手工编写。其实第一步用jQuery写出了三行HTML接口，写的还挺多的，但其实只有一个函数(* _ _ *).

_ initinputdom : function(){ var _ this=this，inputContainer=$('div/div ')，inputContent=$(' input type=' ' _ this。类型' ')，inputResult=$(' div/div ')；inputcontainer。add class(' input _ container ')；输入内容。add CLaSS(' input _ text input _ text _ blur ')；输入结果。add class(' input _ result ')；inputcontainer。追加(InputContent)；inputcontainer。追加(InputResult)；_这个。元素。追加(InputContainer)；//记录当前需要操作的DOM _这个。input=_ this。元素。find(' input ')；_这个。容器=_ this。元素。查找(' .input _ container’)；if (_this.placeholder！==null){//占位符提示信息_this.input.prop('占位符，_这个。占位符)；} _这个_ initEvent()；},(4)绑定事件：获取焦点专注，失去焦点模糊，值改变改变，需要注意一点，就是当输入框只读的话，是不需要绑定事件的

//绑定事件_initEvent:函数(){ var _ this=this//获取焦点专注，失去焦点模糊，值改变更改/如果输入框只读的话就不操作_这个。输入。focus(function(){ if(！$(这个)。attr(' readonly '){ _ this ._setStatus(这是"焦点");}}).blur(function() {if(！$(这个)。attr(' readonly '){ if(_ this。GetValue()==' '){ if(_ this。IsRequired){//必填项失去焦点_这个_设置状态(此处为"错误");} else {//非必填项失去焦点_这个_设置状态(此处为"模糊");}} else {//有值得情况直接进行值校验if (_this )._checkSpec()) {_this ._setStatus(这个，'右');} else {_this ._setStatus(此处为"错误");}}}}).keyup(function() {_this ._ CheckLenght()；});},(5)值正确性校验：通过读取输入框值的规则，来校验输入内容的正确性

//校验输入框输入内容_checkSpec:函数(){ var _ this=thisreturn _ this。规格。测试(_ this。getvalue())；},(6)长度校验：通过读取输入框值的长度规则，来校验输入长度的正确性

//检验输入框输入长度_检查长度：函数(){var _this=this，inputLength=_this.length，//8-32这种格式的范围currentLength=_this.getValue().长度，//长度是否在范围内lengthFlag=trueif (/^\d -\d $/.test(inputLength)) {//区间范围var值范围=InputLength。拆分('-')；//当前值长度小于设定范围if(parsent(值范围[0]，10)当前长度){ length flag=false}//当前值长度大于设定范围，屏蔽输入if(CurrentLength ParSeint(value range[1]，10)){ _ this。SetValue(_ this。GetValue().子字符串(0，parsent(值范围[1]，10)))；}} else if (/^\d $/.test(inputLength)) {//固定长度//当前长度不等于设定长度if (currentLength！==parsent(InputLength，10)){ Length标志=false}}//长度不在区间飘红if(！lengthFlag) {_this ._setStatus(_this.input，' error ')；} else {_this ._setStatus(_this.input，‘focus’)；}},(7)设置输入框状态：根据校验的结果，显示不同的状态

//设置输入框状态，正确，错误，失去焦点，获得焦点_ setStatus:函数(输入命令，状态){ $(输入命令).remove CLaSS(' input _ text _ focus input _ text _ blur input _ text _ right input _ text _ error ')；$(输入订单).兄弟姐妹('。input _ result’).移除CLaSS(' input _ result _ right input _ result _ error ')；if(status===' right '){ $(InputBoj).addCLaSS(' input _ text _ right ')；$(输入订单).兄弟姐妹('。input _ result’).addClass('input_result_right ').文本('');} else if(status==' error '){ $(InputBoj).添加类(' input _ text _ error ')$(InputBoj).兄弟姐妹('。input _ result’).addClass('input_result_error ').文本('');} else if(status===' blur '){ $(InputBoj).添加CLaSS(' input _ text _ blur ')；} else if(status==' focus '){ $(InputBoj).addCLaSS(' input _ text _ focus ')；}},(8)设置输入框大小：提供了简单的接口设置输入框的大小小的，大的，或者数字

//设置输入框大小setSize:函数(大小){ var _ this=thisvar ScaleSize=1；if(size===' small '){ scaleSize=0.8；} else if(size===' big '){ scaleSize=1.2；} else if (parseInt(大小，10)!==NaN) {scaleSize=parseInt(size，10)}；_this.container.css('transform '，' scale '(' scaleSize '))；},(9)置灰操作：禁止输入任何内容

//设置grey :函数(标志){ var _ this=thisif(flag){ _ this . input . prop(' readonly '，' ')；} else { _ this . input . remove attr(' readonly ')；}}，(10)获取数值并重置数值实现

//获取输入框值getvalue : function(){ return this . input . val()；}，//设置输入框值setvalue : function(str){ this。input . val(str)；}(11)自定义输入框界面

//默认参数$ . fn . createinput . default value={//输入框类型：text，密码类型：' text '，//输入框规则spec: null，//长度length: null，//描述输入字段placeholder: null，//是必选项3360 false }；[如何通话]

//生成输入框$ ('# username ')。createinput ({type:' text '，spec3360/[0-9] \ d * $/，length:' 5-8 '，placeholder3360 '不能为空，只能输入数字，长度为5-。//调用公共方法var myinput=$ ('# username ')。数据(' create input ')；myinput . setvalue(' 1245 ')；以上就是jQuery如何封装边肖介绍的输入框插件。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！