javascript - 在输入框输入第一个跳转到下一个后，边框颜色会随光标变绿色，跟pc网页支付宝输入密码那样？怎么实现呢？
本文介绍了javascript - 在输入框输入第一个跳转到下一个后，边框颜色会随光标变绿色，跟pc网页支付宝输入密码那样？怎么实现呢？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
在输入框输入第一个跳转到下一个后，边框颜色会随光标变绿色，跟pc网页支付宝输入密码那样？怎么实现呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>登录</title>
<script src="js/mui.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<link href="css/hnb.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/ver.css" />
</head>
<body>
<!--首部-->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">登录</h1>
</header>
<!--内容-->
<div class="mui-content">
<!-- logo图 -->
<img class="responsive-img" src="img/shuijiao.jpg" alt="" />
<!-- 注册表单 -->
<form class="form">
<div class="mui-input-row">
<input type="tel" id="tel" class="hnb-input mui-input-clear" placeholder="请输入您的手机号" maxlength='11' />
<span class="hnb-icon hnb-icon-user"></span>
</div>
<div class="mui-input-row">
<input type="password" id="password" class="hnb-input mui-input-password" placeholder="请设置不少于6位数的密码" />
<span class="hnb-icon hnb-icon-password"></span>
</div>
<button type="button" class="hnb-btn hnb-btn-lg" id="loginButton">登录</button>
<div class="instruction">
<a id="reg">注册账户</a>
<a id="forgetPassword" class="mui-pull-right">找回密码</a>
</div>
</form>
<!-- 底部 -->
<footer>
<div class="center-title">
<span class="title">其他登录</span>
<div class="border"></div>
</div>
<!-- 微信登录 -->
<div class="wechat-login hnb-icon-wechat" id="wcLogin"></div>
</footer>
</div>
<!--验证码-->
<div class="mui-popup mui-popup-in" style="display: block;">
<div class="mui-popup-inner">
<div class="sweet-yzm">
<div class="mui-popup-title">请输入一下图形中的字母</div>
<div class="ver-img">
</div>
<div class="ver-right">
<a style="color: #8f8f8f;font-size: 15px;" href="#">看不清 ? 换一张</a>
</div>
<form class="input-yzm">
<input type="text" name="" id="" value="" maxlength="1" autofocus class="input-juli inputw" />
<input type="text" name="" id="" value="" maxlength="1" class="input-juli inputw" />
<input type="text" name="" id="" value="" maxlength="1" class="input-juli inputw" />
<input type="text" name="" id="" value="" maxlength="1" class="inputw" />
</form>
</div>
</div>
</div>
<!--弹出验证码全屏半透明-->
<div class="mui-popup-backdrop mui-active" style="display: block;"></div>
<script>
// $('.inputw').on('keyup', function(event) {
// if($(this).val() != '') {
// // 如果不为空
// $(this).next('input').focus();
// }
// });
// $('.inputw').on('keydown', function(event) {
// var evt = event || window.event;
// if(this.value == "" && evt.keyCode == 8) {
// // 如果为空且按下退回键
// $(this).prev('input').focus();
// }
// });
var inputtwArr = document.querySelectorAll(".inputw");
for(var i = 0, j = inputtwArr.length; i < j; i++) {
inputtwArr[i].addEventListener("keyup", function(e) {
if(this.value !== "") {
this.nextSibling.nextElementSibling.focus();
return false;
}
})
}
[].slice.call(document.getElementsByClassName('inputw'),0)
.forEach(function(el){
var addEvent = 'attachEvent' in el ? 'attachEvent' : 'addEventListener';
var eventName = 'attachEvent' in el ? 'onkeydown' : 'keydown';
el[addEvent](eventName,function(ev){
var evt = ev || window.event;
var pr = el.previousElementSibling || el.previousSibling;
var value = el.value;
var key = event.which || event.charCode || event.keyCode;
if(pr.focus && el.value === "" && +key === 8){
pr.focus();
}
},false);
});
</script>
<!-- js文件 -->
<script src="js/function.js"></script>
<script src="js/login.js"></script>
</body>
</html>
解决方案
input[type=text] {
-webkit-appearance: none;
outline: none;
border-radius: 0;
}
input[type=text]:focus {
border: 1px solid 809c4f;
}这篇关于javascript - 在输入框输入第一个跳转到下一个后，边框颜色会随光标变绿色，跟pc网页支付宝输入密码那样？怎么实现呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
