[javascript]实现一个输入放大展示的小功能

实现了啥

实现的功能

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";
    }
});