实现了啥
实现的功能
1.展示框默认隐藏,当用户输入字符时,展示框同步展示用户输入的内容
2.当用户按下S键时自动定位到搜索框
3.当用户离开输入框时展示框自动隐藏,进入输入框,如果有内容则显示展示框
4.用户如果不输入内容,不展示输入框
看看效果
咋写的
css部分
.info {
visibility: hidden;
display: inline-block;
position: relative;
box-sizing: border-box;
margin-bottom: 10px;
padding: 2px;
height: 26px;
max-width: 100%;
min-width: 100px;
overflow: hidden;
box-shadow: 1px 3px 8px #333;
}
.info::after {
content: " ";
position: absolute;
bottom: -18px;
left: 30px;
width: 0px;
height: 0px;
border: 8px solid transparent;
border-top: 10px solid white;
}
HTML部分
....
<span id="info" class="info"></span><br>
<input type="text" id="ipt">
....
JS部分
var ipt = document.querySelector("#ipt");
var info = document.querySelector("#info");
//这里使用keyup事件,这样不会导致s被输入进搜索框
document.addEventListener("keyup", function(e) {
if (e.code == "KeyS") {
ipt.focus();
}
});
//同步搜索框与info盒子的内容
//这里使用keyup,才会先输入,执行填充文本操作
document.addEventListener("keyup", function() {
info.innerHTML = ipt.value;
if (ipt.value == '') {
info.style.visibility = "hidden";
} else {
info.style.visibility = "visible";
}
});
//失焦隐藏
ipt.addEventListener("blur", function() {
info.style.visibility = "hidden";
});
//回焦显示,但得有内容
ipt.addEventListener("focus", function() {
if (this.value != "") {
info.style.visibility = "visible";
}
});