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

网站首页>>行业资讯>>查看详情

利用jQuery实现短信验证码输入框功能
2017-10-13 09:55:43
利用jQuery实现短信验证码输入框功能
利用jQuery实现短信验证码输入框功能

其核心是利用了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;
}
验证码短信

标签：济南千寻验证码短信平台

点击免费电话咨询:18053114365

备案号：鲁ICP备17024377号-1济南千寻信息科技有限公司 < a href="https://beian.miit.gov.cn/" target="_blank">备案号：鲁ICP备17024377号-1
电话:400-6577-190 手机:18053114365
地址:：高新区齐鲁软件园

备案号：鲁ICP备17024377号-1