移动端密码框

最新推荐文章于 2022-02-25 11:52:25 发布

YingMuMonkey

最新推荐文章于 2022-02-25 11:52:25 发布

阅读量415

点赞数

分类专栏：随记

本文链接：https://blog.csdn.net/YingDaoMonkey/article/details/83013684

版权

随记专栏收录该内容

100 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .pwd-box{
		width:310px;
		padding-left: 1px;
	    position: relative;
	    border: 1px solid #9f9fa0;
	    border-radius: 3px;
	}
	.pwd-box input[type="tel"]{
		width: 99%;
	    height: 45px;
	    color: transparent;
	    position: absolute;
	    top: 0;
	    left: 0;
	    border: none;
	    font-size: 18px;
	    opacity: 0;
	    z-index: 1;
	    letter-spacing: 35px;
	}
	.fake-box input{
		width: 44px;
	    height: 48px;
	    border: none;
	    border-right: 1px solid #e5e5e5;
	    text-align: center;
	    font-size: 30px;
	}
	.fake-box input:nth-last-child(1){
		border:none;
	}

</style>
<body>
    <div class="pwd-box">
        <input type="tel" maxlength="6" class="pwd-input" id="pwd-input">
        <div class="fake-box">
            <input type="password" readonly="">
            <input type="password" readonly="">
            <input type="password" readonly="">
            <input type="password" readonly="">
            <input type="password" readonly="">
            <input type="password" readonly="">
        </div>
    </div>
    <script src="./jquery-3.1.1.min.js"></script>
<script>
    var $input = $(".fake-box input");
			$("#pwd-input").on("input", function() {
				var pwd = $(this).val().trim();
				for (var i = 0, len = pwd.length; i < len; i++) {
					$input.eq("" + i + "").val(pwd[i]);
				}
                // 这是删除密码框密码
				$input.each(function() {
					var index = $(this).index();
					if (index >= len) {
						$(this).val("");
					}
				});
				// if (len == 6) {
				// 	//执行其他操作
				// }
			});

</script>
</body>
</html>

引入zepto或者jQuery（二者选其一）

YingMuMonkey

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端密码框

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫

专栏目录