XM的小窝


 

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

发表评论

电子邮件地址不会被公开。必填项已用 * 标注