龙空技术网

利用jQuery实现短信验证码输入框功能

Cyan4399 238

前言:

当前看官们对“jqueryui弹出框”大概比较关注,看官们都需要知道一些“jqueryui弹出框”的相关资讯。那么小编同时在网上汇集了一些关于“jqueryui弹出框””的相关知识,希望姐妹们能喜欢,兄弟们一起来了解一下吧!

其核心是利用了keyup事件属性。

在事例里添加了正则因此只能输入数字,输入英文字符时会弹出警告提示框。

1、未输入效果

未输入效果

2、验证码输入效果

验证码输入效果

jQuery核心代码:

<script>

$('.demo input').keyup(function() {

if(/^[0-9]{1}$/g.test($(this).val())) {

$(this).next().focus();

} else {

alert('请输入1位数字');

$(this).val('');

}

});

</script>

HTML代码:

<div class="demo">

<input type="text">

<input type="text">

<input type="text">

<input type="text">

</div>

CSS代码:

input {

width: 40px;

height: 40px;

text-align: center;

font-size: 20px;

}

标签: #jqueryui弹出框