需求:
-
用户输入数字的时候,表单上侧会出现一个大盒子,里面显示对应的输入的内容
-
如果失去焦点,则放大盒子隐藏
<!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>
<style>
* {
margin: 0;
padding: 0;
}
.search {
position: relative;
width: 178px;
margin: 100px;
}
.sf {
height: 30px;
padding-left: 10px;
outline: none;
}
.con {
display: none;
position: absolute;
top: -43px;
min-width: 178px;
max-width: 440px;
/* 让连续的数字自动换行 */
word-wrap: break-word;
border: 1px solid rgba(0, 0, 0, .2);
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
padding: 5px;
font-size: 18px;
line-height: 20px;
color: #333;
}
.con::before {
content: '';
width: 10px;
height: 10px;
position: absolute;
top: 25px;
left: 18px;
border-left: 1px solid rgba(0, 0, 0, .2);
border-bottom: 1px solid rgba(0, 0, 0, .2);
background-color: #fff;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="search">
<div class="con"></div>
<input type="text" placeholder="请输入您的快递单号" class="sf">
</div>
<script>
// 快递单号输入内容时, 上面的大号字体盒子(con)显示(这里面的字号更大)
// 表单检测用户输入: 给表单添加键盘事件
// 同时把快递单号里面的值(value)获取过来赋值给 con盒子(innerText)做为内容
// 如果快递单号里面内容为空,则隐藏大号字体盒子(con)盒子
const con = document.querySelector('.con');
const sf = document.querySelector('.sf');
sf.addEventListener('input', function () {
// console.log('输入内容啦');
if (this.value == '') {
con.style.display = 'none';
} else {
con.style.display = 'block';
con.innerText = this.value;
}
})
// 当我们失去焦点,就隐藏这个con盒子
sf.addEventListener('blur', function () {
con.style.display = 'none';
})
// 当我们获得焦点,就显示这个con盒子
sf.addEventListener('focus', function () {
if (this.value !== '') {
con.style.display = 'block';
}
})
</script>
</body>
效果展示: