模拟京东快递单号查询

最新推荐文章于 2023-03-28 11:28:14 发布

hcoke

最新推荐文章于 2023-03-28 11:28:14 发布

阅读量417

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/m0_62962469/article/details/123656707

版权

JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.search {
				position: relative;
				width: 178px;
				margin: 100px;
			}
			
			.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">123</div>
			<input type="text" placeholder="请输入您的快递单号" class="jd" />
		</div>
		<script type="text/javascript">
		//快递单号输入内容时，上面的大号字体盒子(con)显示(这里面的字号更大)
		//表单检测用户输入：给表单添加键盘事件
		//同时把快递单号里面的值(value)获取过来 赋值给 con盒子 (innerText) 作为内容
		//如果快递单号里面内容为空，则隐藏大号字体盒子(con)
		//注意:keydown 和 keypress 在文本框里面的特点，他们两个事件触发的时候，文字还没有落入文本框中。
		//keyup事件触发的时候，文字已经落入文本框
		//失去焦点 就隐藏con这个盒子
		//获得焦点 并且文本框内容不为空 就显示这个con盒子
			var con = document.querySelector('.con');
			var jd_input = document.querySelector('.jd');
			jd_input.addEventListener('keyup', function() {
				//console.log('输入内容了');
				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>

快递单号输入内容时，上面的大号字体盒子(con)显示(这里面的字号更大)
表单检测用户输入：给表单添加键盘事件
同时把快递单号里面的值(value)获取过来赋值给 con盒子 (innerText) 作为内容
如果快递单号里面内容为空，则隐藏大号字体盒子(con)
注意:keydown 和 keypress 在文本框里面的特点，他们两个事件触发的时候，文字还没有落入文本框中。
keyup事件触发的时候，文字已经落入文本框
失去焦点就隐藏con这个盒子
获得焦点并且文本框内容不为空就显示这个con盒子

hcoke

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
模拟京东快递单号查询

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .search { position: relative; width: 178px; margin:.
复制链接

扫一扫