我的JavaScript回顾之路_08—0227—支付密码输入框/弹性布局flex_flex布局实现支付宝输入密码键盘-CSDN博客

本文链接：https://blog.csdn.net/zsqRr123456/article/details/79384197

1、支付密码输入框

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery.js"></script>
	<style>
		input{width:5%; text-align: center; outline: none;}
	</style>
</head>
<body>
	<div>
		<input type="password" class="password" maxlength="1" index='0'>
		<input type="password" class="password" maxlength="1" index='1'>
		<input type="password" class="password" maxlength="1" index='2'>
		<input type="password" class="password" maxlength="1" index='3'>
		<input type="password" class="password" maxlength="1" index='4'>
		<input type="password" class="password" maxlength="1" index='5'>
	</div>
	<script>
		//change事件
		//input事件
		//blur   focus 失去/获取焦点
		var index = 0;
		$(function(){
			$(".password")[0].focus();
			$(".password").on('focus', function(){
				var tempIndex = $(this).attr("index");
				if(tempIndex == index){
					return;
				}
				this.blur();
				$(".password")[index].focus();
			})
			$(".password").on('input', function(){
				this.blur();
				if(this.value == ''){
					if(index == 0){
						$(".password")[index].focus();
						return;
					}
					index++;
				}else{
					if(index == 5){
						$(".password")[index].focus();
						return;
					}
					index++;
					document.onkeyup = function(event){
						if(event.key == 'Backspace'){
							if(index == 0){
								$(".password")[index].focus();
								$($(".password")[index]).val('');
								return;
							}
							index--;
							$(".password")[index].focus();
							$($(".password")[index]).val('');
						}
					}
				}
				$(".password")[index].focus();
			})
		})
	</script>
</body>
</html>

2、弹性布局flex

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.red{
			background: red;
			padding:15px;
			display: flex;
			flex-direction: row;
			justify-content:space-around;
		}
		.red>div{
			height: 200px;
			padding:15px;
			display: flex;
			flex-direction: column;
			justify-content:space-between;
		}
		.blue{
			background: blue;
			/*flex:1;*/
		}
		.black{
			background: black;
			/*flex:2;*/
		}
		.orange{
			background: orange;
			/*flex:1;*/
		}
		.yellow{
			background: yellow;
			padding: 10px;
		}
		.pink{
			background: pink;
			padding: 10px;
		}
		.green{
			background: green;
			padding: 10px;
		}
		.light-green{
			background: lightgreen;
			margin-top: 20px;
			width: 100px;
			height: 100px;
			display: flex;
			flex-direction: row;
			justify-content: center;
		}
		.white{
			background: white;
			width: 10px;
			height: 10px;
			border-radius: 10px;
			margin: auto 0;
			/*margin: auto;*/
		}
	</style>
</head>
<body>
	<div class="red">
		<div class="blue">
			<div class="pink"></div>
			<div class="yellow"></div>
			<div class="green"></div>
		</div>
		<div class="black">
			<div class="pink"></div>
			<div class="yellow"></div>
			<div class="green"></div>
		</div>
		<div class="orange">
			<div class="pink"></div>
			<div class="yellow"></div>
			<div class="green"></div>
		</div>
	</div>
	<div class="light-green">
		<div class="white">
		</div>
	</div>
</body>
</html>

盒子的兼容性写法
.box{
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}
子元素的兼容性写法
.flex1 {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}