JavaScript基础学习 模拟京东查询快递单号

    
    
    
    Document
    
        .box {
            height: 50px;
            width: 500px;
            background-color: pink;
            font-size: 50px;
            display: none;
        }
    




    

        

        
    
    
        var input = document.querySelector('input');
        var box = document.querySelector('.box');
        input.addEventListener('keyup', function() {
            if (this.value == '') {
                box.style.display = 'none';
            } else {
                box.style.display = 'block';
                box.innerHTML = this.value;
            }

        })

        // 当我们失去焦点时，就隐藏输入框上方的盒子
        input.addEventListener('blur', function() {
            box.style.display = 'none';
        })

        // 当我们获得焦点时，就显示输入框上方的盒子
        input.addEventListener('focus', function() {
            if (this.value == '') {
                box.style.display = 'none';
            } else {
                box.style.display = 'block';
            }

        })