关于H5单字符输入框组的介绍

最新推荐文章于 2023-04-13 10:55:57 发布

ekjheidj

最新推荐文章于 2023-04-13 10:55:57 发布

阅读量532

点赞数

分类专栏：源码文章标签：单字符输入框输入框组支付宝密码框 H5 单字符输入框组

本文链接：https://blog.csdn.net/ekjheidj/article/details/74199612

版权

源码专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天介绍一下单字符输入框组的实现就像上图那样，有点和支付宝或者微信的密码输入框类似，目前我能想到的就有两种办法，多的不说，直接上代码：

方法一：通过按键获取事件

<!DOCTYPE html>

<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">	
	<title>Bootstrap </title>
	<script type="text/javascript">
	(function(){var phoneWidth=parseInt(window.screen.width),phoneScale=phoneWidth/640,ua=navigator.userAgent;if(/Android (\d+\.\d+)/.test(ua)){var version=parseFloat(RegExp.$1);if(version>2.3){document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+", maximum-scale = "+phoneScale+', target-densitydpi=device-dpi">')}else{document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">')}}else{document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">')};})();
	</script>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<style type="text/css">
		html,body{margin: 0;padding: 0;width: 100%;height: 100%;}
		/*html{background-color: #ccc;}*/
		body{width: 640px;margin: 0 auto;box-sizing: border-box;}
		input{
			width: 90px;
			height: 100px;
			float: left;
			text-align: center;
			border-color:rgb(218,218,218);
			margin-left: O auto;
			border-style:solid; 
			border-width: 1px;
			font-size: 50px;
			color: red;
		}
		
	</style>
	<script type="text/javascript">
		$(document).ready(function(){
			$("input").keyup(function(e){
				//console.log(1);
				if(e.which == 8){
					$(this).prev().focus();
				}else{
					$(this).next().focus();
				}
			})
		});
		
		
		
	</script>
</head>
<body>
	
	<div style="padding:500px 0;width: 100%;">
		<div style="width: 400px;margin: auto;">
			<input id="input1" type="text" style="border-radius:20px 0 0 20px;" maxlength="1"  />
			<input id="input2" type="text" style="" maxlength="1"/>
			<input id="input3" type="text" style="" maxlength="1"/>
			<input id="input4" type="text" style="border-radius:0 20px 20px 0;" maxlength="1" />
		</div>
	</div>
</body>
</html>

方法二：通过输入来获取事件

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">	
	<title>Bootstrap </title>
	<script type="text/javascript">
	(function(){var phoneWidth=parseInt(window.screen.width),phoneScale=phoneWidth/640,ua=navigator.userAgent;if(/Android (\d+\.\d+)/.test(ua)){var version=parseFloat(RegExp.$1);if(version>2.3){document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+", maximum-scale = "+phoneScale+', target-densitydpi=device-dpi">')}else{document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">')}}else{document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">')};})();
	</script>
    <!--<script src="js/jquery-1.10.2.min.js"></script>-->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<style type="text/css">
		html,body{margin: 0;padding: 0;width: 100%;height: 100%;}
		/*html{background-color: #ccc;}*/
		body{width: 640px;margin: 0 auto;box-sizing: border-box;}
		input{
			width: 90px;
			height: 100px;
			float: left;
			text-align: center;
			border-color:rgb(218,218,218);
			margin-left: O auto;
			border-style:solid; 
			border-width: 1px;
			font-size: 50px;
			color: red;
		}
		
	</style>
	<script type="text/javascript">
		function fun(temp){
			console.log(temp);
			var valstr=$("#input"+temp).val();
			if(valstr.length==1 && " "!=valstr){
				$("#input"+(temp+1)).focus();
				$("#input"+(temp+1)).val(" ");
				return ;
			}
			if(valstr.length==2){
				var val=valstr.substr(0,1);
				if(" "==val){
					$("#input"+temp).val(valstr.substr(1,1));
					$("#input"+(temp+1)).focus();
					return ;
				}else{
					$("#input"+temp).val(valstr.substr(0,1));
					$("#input"+(temp+1)).focus();
					$("#input"+(temp+1)).val(valstr.substr(1,1));
					return ;
				}
				
			}
			if(''==valstr){
				$("#input"+(temp-1)).focus();
				return ;
			}
		}
		
	</script>
</head>
<body>
	
	<div style="padding:500px 0;width: 100%;">
		<div style="width: 400px;margin: auto;">
			<input id="input1" type="text" style="border-radius:20px 0 0 20px;" οninput="fun(1)" maxlength="2"  />
			<input id="input2" type="text" style="" οninput="fun(2)" maxlength="2"/>
			<input id="input3" type="text" style="" οninput="fun(3)" maxlength="2"/>
			<input id="input4" type="text" style="border-radius:0 20px 20px 0;" οninput="fun(4)" maxlength="2" />
		</div>
	</div>
</body>
</html>

以上就是两种方法的实现代码，我主要写的是移动端浏览器部分，PC端也适用

最后，大家要是觉得好，请点赞，有问题请留言1101758018@qq.com