js实现京东快递单号查询效果

最新推荐文章于 2022-06-22 10:54:20 发布

a_fafafa

最新推荐文章于 2022-06-22 10:54:20 发布

阅读量778

点赞数 1

文章标签： html css js

本文链接：https://blog.csdn.net/weixin_49203128/article/details/119568750

版权

实现目标

输入框输入，其顶部会出现一个放大框效果的盒子，获取并展示实时输入信息，失去焦点后放大框会自动消失。

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
				margin: 0;
				padding: 0;
		}
		.jd{
			height: 30px;
			box-shadow: 0 2px 4px rgba(0,0,0,.2);
		}
		.search{
			position: relative;
			margin: 100px auto;
			width: 178px;
		}
			.con{
				display: none;
				position: absolute;
				top: -40px;
				width: 171px;
				border: 1px solid rgba(0,0,0,.2);
				box-shadow: 0 2px 4px rgba(0,0,0,.2);
				padding: 5px 0;
				font-size: 18px;
				line-height: 20px;
				color: #333;
			}
			/* 放大框底部小三角绘制 */
			.con::before{
				content: '';
				width: 0;
				height: 0;
				position: absolute;
				top: 28px;
				left: 18px;
				border: 8px solid #000;
				border-style: solid dashed dashed;
				border-color: #fff transparent transparent;
				
			}
		</style>
	</head>
	<body>
		<div class="search">
			<div class="con"></div>
			<input type="text" name="" class="jd" placeholder="请输入您的快递单号"/>
		</div>
		<script type="text/javascript">
			var con = document.querySelector('.con');
			var jd_input = document.querySelector('.jd');
			// keypress 和 keydown 在文本框里的特点：他们两个事件触发时，文字还没有落入文本框
			jd_input.addEventListener('keyup',function(e){
				if(this.value === ''){
					con.style.display = 'none';
				}else{
					con.style.display = 'block';
					con.innerText = this.value;
				}
			})
			// 失去焦点隐藏盒子
			jd_input.addEventListener('blur',function(){
				con.style.display = 'none';
			})
			// 获得焦点显示盒子
			jd_input.addEventListener('focus',function(){
				if(this.value !=='' ){
					con.style.display = 'block';
				}
			})
		</script>
	</body>
</html>