input校验数字且自动跳转下一个input框输入，监听backspace事件

实现效果如上图所示：

1、在前一个输入框写值的时候，若是数字，光标自动跳转到下一个输入框。若是非数字，则不输入值。（自动匹配数字，监听文本框的值是否为数字）

2、在删除后一个输入框的值的时候，光标自动跳转到前一个输入框。

技术点：

1、正则校验数字：   var reg = new RegExp("^[0-9]*$");

2、原生js的oninput（兼容IE9以下版本写法：onpropertychange）-------监听文本框输入的值；

3、监听backspace事件：e.keyCode = 8；

再次输入密码，在提交事件中校验。（字符串存储校验，若需要parseInt()转换为Number类型）；

//css是用less编译的.display-flex{    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */     display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */     display: -ms-flexbox; /* TWEENER - IE 10 */     display: -webkit-flex; /* NEW - Chrome */     display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */}.flex1{    -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */     -moz-box-flex: 1; /* OLD - Firefox 19- */     -webkit-flex: 1; /* Chrome */     -ms-flex: 1; /* IE 10 */     flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */}

/*标题*/

.titleLine{    .display-flex;    width:100%;    .line{        .flex1;        position: relative;        top:-6px;        border-bottom:1px solid rgb(174,174,174);    }    .titleText{        padding:0 12px;        font-size:14px;        color: rgb(174,174,174);    }}

/*input用flex布局*/

.titleLine{     .display-flex;      width:100%;      .line{             .flex1;               position: relative;               top:-6px;                    border-bottom:1px solid rgb(174,174,174);       }         .titleText,.phoneNumText{               padding:0 12px;               font-size:14px;               color: rgb(174,174,174);          }}

<!--标题--><div class="titleLine"><div class="line"></div><div class="titleText">请设置密码查询</div><div class="line"></div></div><!--input输入框--><div class="inputOne"><input type="password" name="" id="" value="" maxlength="1" /><input type="password" name="" id="" value="" maxlength="1" /><input type="password" name="" id="" value="" maxlength="1" /><input type="password" name="" id="" value="" maxlength="1" /><input type="password" name="" id="" value="" maxlength="1" /><input type="password" name="" id="" value="" maxlength="1" /></div>

//判断输入的密码还是否为数字$('.inputOne input').on("input propertychange",function(){var _this = $(this);inputFun(_this);});//监听backspace事件$('.inputOne input').on("keyup",function(e){var _this = $(this);var ev = e;keyupFun(_this,ev);});//判断输入的密码还是否为数字function inputFun(value){var reg = new RegExp("^[0-9]*$");var val = value.val();if(!reg.test(val)){value.val('')}else{value.next().focus();}}//监听backspace事件function keyupFun(value,e){var k = e.keyCode;var val = e.key;if(k == 8){//8是backspace的keyCodevalue.prev().focus();}else{return false;}}