2018-08-21

作者：码农小陆

创建时间：2018年08月20日18:40:49

更新时间：2018年08月20日18:40:49

一、实际效果图

二、前端代码参考

var idinput=new Idinput({

contrainer:'#idinput',

num:6

})

引用identifyinginput.min.css：

.idi_code{overflow:hidden;margin:0 auto}.idi_code .idi_item{padding:0;border:0;border-bottom:2px solid #E0E0E0;height:40px;text-align:center;line-height:40px;font-size:20px;float:left;color:transparent;text-shadow:0 0 0 #000}.idi_code .idi_active{border-bottom:2px solid #228DF5}

引用identifyinginput.min.js：

/** * 作者: 码农小陆 * 创建时间: 2018/08/13* 描述: 验证码输入框 */(function(doc,Util){"use strict";function Idinput(options){var self=this;self.contrainer=options.contrainer||'idinput';self.num=options.num||6;self.width=options.width||'320';self.inputs=null;self.renderInput();self.isclick=false;self._initListener()}Idinput.prototype={renderInput:function(){var self=this;var html='

';var itemWidth=80/self.num;var itemMargin=10/self.num;var itemStyle='style="width:'+itemWidth+'%; margin:0 '+itemMargin+'%;"';for(var i=0;i

'}else{html+='

'}}html+='';Util.selector(self.contrainer).innerHTML=html;self.inputs=doc.querySelectorAll('.idi_item');if(self.inputs.length>0){self.inputs[0].focus()}},_initListener:function(){var self=this;self.inputs.forEach(function(element,index){element.addEventListener('click',function(e){self.focusInput(index);self.isclick=true;})});self.inputs.forEach(function(element,index){element.addEventListener('keydown',function(e){console.log(e);if(e.keyCode=='8'||(e.keyCode>=48&&e.keyCode<=57)||(e.keyCode>=96&&e.keyCode<=105)){if(e.keyCode=='8'){element.innerHTML='';if(!self.isclick){self.movebefore(index)}}if(element.innerHTML!=''){if(!self.isclick){if(index0){beforei=i-1;self.focusInput(beforei)}return beforei},getcode:function(){var self=this;var code='';self.inputs.forEach(function(element,index){code+=element.innerHTML});return code}};function getCursortPosition(ctrl){var CaretPos=0;if(document.selection){ctrl.focus();var Sel=document.selection.createRange();Sel.moveStart('character',-ctrl.value.length);CaretPos=Sel.text.length}else if(ctrl.selectionStart||ctrl.selectionStart=='0'){CaretPos=ctrl.selectionStart}return(CaretPos)}function setCaretPosition(ctrl,pos){if(ctrl.setSelectionRange){ctrl.focus();ctrl.setSelectionRange(pos,pos)}else if(ctrl.createTextRange){var range=ctrl.createTextRange();range.collapse(true);range.moveEnd('character',pos);range.moveStart('character',pos);range.select()}}window.Idinput=Idinput}(document,window.Util));