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

最新推荐文章于 2024-11-25 15:04:59 发布

西风XF

最新推荐文章于 2024-11-25 15:04:59 发布

阅读量7.3k

点赞数 1

分类专栏： js 文章标签： keyup 监听backspace input输入框自动跳转

本文链接：https://blog.csdn.net/qq_36242361/article/details/75245067

版权

js 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

实现效果如上图所示：

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的keyCode
		value.prev().focus();
	}else{
		return false;
	}
}