jquery,6位密码输入框效果

最新推荐文章于 2024-05-17 13:52:13 发布

weixin_30666943

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量128

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tony-xf/p/7359433.html

版权

啥也不说，直接贴代码

<!DOCTYPE html>
<html>
    <head>
        <title>仿支付宝支付效果</title>
        <meta charset="utf-8"/>
        <meta name="author" content="tony_xf@foxmail.com">
        <style>
            <!--
            *{margin:0;padding:0; box-sizing: border-box;}
            li{list-style:none}
                .quickPayBox{position:relative; width:242px; height: 38px;margin:20px auto;}
                .quickPayBox .password{position:absolute;top:0;left:0;width:242px;height:38px;opacity:0.01}
                .showView{width: 242px; height:38px;border:1px solid #808080;}
                .showView li{ float:left; width:40px; height:38px; border-right:1px solid #d4d4d4;text-align: center; line-height: 30px;}
                .showView li:last-child{border:none;}
                .showView li .circle{ display:none; width:8px; height:8px; border-radius:50%; background:#000;}
            -->
        </style>
    </head>
    <body>
        <div>
            <div class="quickPayBox">
                <input type="tel" name="password" class="password" maxlength="6">
                <ul class="showView">
                    <li><i class="circle"></i></li>
                    <li><i class="circle"></i></li>
                    <li><i class="circle"></i></li>
                    <li><i class="circle"></i></li>
                    <li><i class="circle"></i></li>
                    <li><i class="circle"></i></li>
                </ul>
            </div>
        </div>
        <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
        <script>
            $('.password').on('input',function(){
                var value = $(this).val();
                var length = value.length;
                $('.showView').find('li').each(function(i){
                    if(i < length){
                        $(this).find('.circle').css({display: 'inline-block'});
                    }else{
                        $(this).find('.circle').hide();
                    }
                })
            });
        </script>
    </body>
</html>

这里只是做了一个效果，实际运用时还需要加正则去校验。
注：这个效果在iphone手机上有瑕疵，会有个光标在那里闪烁，暂时还未找到办法去掉。期望大神路过，贴出解决方案^_^！

转载于:https://www.cnblogs.com/tony-xf/p/7359433.html

weixin_30666943

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery,6位密码输入框效果

啥也不说，直接贴代码<!DOCTYPE html><html> <head> <title>仿支付宝支付效果</title> <meta charset="utf-8"/> <meta name="author" content="tony_...
复制链接

扫一扫