简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 在输入框输入第一个跳转到下一个后，边框颜色会随光标变绿色，跟pc网页支付宝输入密码那样？怎么实现呢？
高洛峰
高洛峰 2017-04-11 12:53:46
0
3
473

在输入框输入第一个跳转到下一个后，边框颜色会随光标变绿色，跟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>
<!--内容-->
<p class="mui-content">
    <!-- logo图 -->
    <img class="responsive-img" src="img/shuijiao.jpg" alt="" />
    <!-- 注册表单 -->
    <form class="form">
        <p 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>
        </p>
        <p 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>
        </p>   
        <button type="button" class="hnb-btn hnb-btn-lg" id="loginButton">登录</button>
        <p class="instruction">
            <a id="reg">注册账户</a>
            <a id="forgetPassword" class="mui-pull-right">找回密码</a>
        </p>
    </form>
    <!-- 底部 -->
    <footer>
        <p class="center-title">
            <span class="title">其他登录</span>
            <p class="border"></p>
        </p>
        <!-- 微信登录 -->
        <p class="wechat-login hnb-icon-wechat" id="wcLogin"></p>
    </footer>    
</p>

<!--验证码-->
<p class="mui-popup mui-popup-in" style="display: block;">
        <p class="mui-popup-inner">
            <p class="sweet-yzm">
                <p class="mui-popup-title">请输入一下图形中的字母</p>
                <p class="ver-img">
                    
                </p>
                <p class="ver-right">
                    <a style="color: #8f8f8f;font-size: 15px;" href="#">看不清 ? 换一张</a>
                </p>
                <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>
            </p>
        </p>
</p>
<!--弹出验证码全屏半透明-->
<p class="mui-popup-backdrop mui-active" style="display: block;"></p>

<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>

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...

reply all(3)
左手右手慢动作
左手右手慢动作2017-04-11 12:55:46 3 floor 
input[type=text] {
    -webkit-appearance: none;
    outline: none;
    border-radius: 0;
}

input[type=text]:focus {
    border: 1px solid 809c4f;
}
Like +0
Add Reply
PHPzhong
PHPzhong2017-04-11 12:55:46 2 floor

我也遇到了这个问题 你是怎么做的？我昨天也做了个

Like +0
Add Reply
阿神
阿神2017-04-11 12:55:46 1 floor

在获取输入框焦点时就给个样式就OK了，失去焦点了那个样式还在，楼上的就是这个意思

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！