【H2O2|全栈】JS入门知识（十一）DOM（4）BOM（2）-优快云博客

事件	功能	备注
keyup	检测按键弹起	\
keydown	检测按键按下	不区分大小写
keypress	检测按键按下	1.区分大小写 2.忽略功能按键（如←↑→↓等）

事件

功能

备注

keyup

检测按键弹起

keydown

检测按键按下

不区分大小写

keypress

检测按键按下

1.区分大小写

2.忽略功能按键（如←↑→↓等）

在事件对象中，也有两个属性值与按键有关——

属性	作用	备注
e.key	获取当前按键的名称	\
e.keyCode	获取当前按键的值对应的ASCII码	keydown的字母统一视为大写字母，keypress则会区分大小写字母的ASCII码值

案例

Q：实现输入快递单号，悬浮窗实时显示快递单号。

A：由于我们需要在输入的同时获取到输入的值，所以显然需要获取键盘输入事件，并实时赋值给悬浮窗的innerHTML。

那么，关键问题是，我们到底是用keyup还是keydown呢？

试想一下，keydown需要在按下按键时才能触发，所以当我们按下一个按键之后，触发一次事件处理程序，上一次的输入input的值确实被赋值给目标元素了，但是，本次的值仍旧需要下一次按键才可以再次触发程序来获取input中的值，所以导致结果的显示延后了。

因此，我们选择使用keyup，当输入一个值时，我们在按下按键时在input中输入了值，在抬起按键的时候触发事件处理程序将该值赋值出去。

此外，还有一些小细节，就是我们需要在聚焦input框且框中值不为空时在悬浮窗显示值，在失焦input框时立刻隐藏悬浮窗。

参考HTML代码如下——

    <div class="search">
        <div class="con"></div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>

参考CSS样式如下——

        * {
            margin: 0;
            padding: 0;
        }

        .search {
            position: relative;
            width: 178px;
            margin: 100px;
        }

        .con {
            display: none;
            position: absolute;
            top: -40px;
            width: 171px;
            border: 1px solid rgba(0, 0, 0, .2);
            box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            color: #333;
        }

        .con::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
        }

参考JS代码如下——

        var ipt = document.querySelector("input")
        var div = document.querySelector(".con")

        ipt.addEventListener("focus", function () {
            if (this.value) {
                div.style.display = "block"
                div.innerHTML = this.value
            }
        })

        ipt.addEventListener("blur", function () {
            div.style.display = "none"
        })

        ipt.addEventListener("keyup", function () {
            if (this.value) {
                div.style.display = "block"
                div.innerHTML = this.value
            } else {
                div.style.display = "none"
            }
        })