<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
overflow: hidden;
width: 200px;
margin: 100px auto;
}
.box1 {
width: 200px;
height: 40px;
padding-left: 5px;
}
.con {
position: relative;
width: 150px;
height: 30px;
font-size: 20px;
line-height: 30px;
padding: 0 5px;
border: 1px solid #999;
box-shadow: 0 3px 3px #666;
margin-bottom: 8px;
border-radius: 10px;
display: none;
}
.con::after {
content: '';
position: absolute;
bottom: -14px;
left: 20px;
width: 0;
height: 0;
border: 8px solid;
border-color: #fff transparent transparent transparent;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<div class="con"></div>
</div>
<input type="text">
</div>
<script>
var con = document.querySelector('.con');
var input = document.querySelector('input');
// 快速获得焦点
document.addEventListener("keyup", function (e) {
if (e.keyCode === 83) {
input.focus();
}
});
// 输入信息 即显示 设置了大号字体的盒子
input.addEventListener('keyup', function () {
if (this.value === "") { // 这里判断 表单内是否输入内容了
con.style.display = 'none'; // 没输入内容的话 就不显示 上面大号字体的盒子
} else {
con.style.display = 'block'; // 这里显示 上面的大号字体的盒子
con.innerHTML = this.value; // 大号字体的盒子 获取下面表单内输入的内容
}
});
// 失去焦点 隐藏盒子
input.addEventListener('blur', function () {
con.style.display = 'none';
});
// 获得焦点 表单有内容的话 显示盒子
input.addEventListener('focus', function () {
if (this.value !== "") {
con.style.display = 'block';
}
})
</script>
</body>
</html>
