javascript小案例-----快递单号查询

要求:

当我们在文本中输入内容时,文本框自动显示大字号的内容

效果如下:

代码思路:

快递单号输入内容时，上面的大号字体盒子( con)显示(这里面的字号更大)

表单检测用户输入∶给表单添加键盘事件

同时把快递单号里面的值( value )获取过来赋值给con盒子( innerText )做为内容

如果快递单号里面内容为空，则隐藏大号字体盒(con)盒子

当我们失去焦点，就隐藏这个con盒子

当我们获得焦点，并且文本框内容不为空，就显示这个con盒子

注意:

keydown和keypress在文本框里面的特点︰他们两个事件触发的时候，文字还没有落入文本框中。

keyup事件触发的时候，文字已经落入文本框里面了

html部分:

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

css部分:

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

    .con {
        position: absolute;
        /* 先把con盒子隐藏起来 */
        display: none;
        top: -40px;
        width: 171px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        box-shadow: 0 2px 4px rgba(0, 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;
    }

javascript部分:

// 快递单号输入内容时，上面的大号字体盒子( con)显示(这里面的字号更大)
    // 表单检测用户输入∶给表单添加键盘事件
    // 同时把快递单号里面的值( value )获取过来赋值给con盒子( innerText )做为内容
    // 如果快递单号里面内容为空，则隐藏大号字体盒(con)盒子
    // 注意: keydown和keypress在文本框里面的特点︰他们两个事件触发的时候，文字还没有落入文本框中。
    //keyup事件触发的时候，文字已经落入文本框里面了
    var con = document.querySelector('.con');
    var num = document.querySelector('.num');
    num.addEventListener('keyup', function () {
        if (this.value == '') {
            con.style.display = 'none';
        } else {
            con.style.display = 'block';
            con.innerText = this.value;
        }
    })

    // 当我们失去焦点， 就隐藏这个con盒子
    // 当我们获得焦点，并且文本框内容不为空，就显示这个con盒子
    num.addEventListener('blur', function () {
        if (this.value != '') {
            con.style.display = 'none';
        }
    })
    num.addEventListener('focus', function () {
        if (this.value != '') {
            con.style.display = 'block';
        }
    })

javascript小案例-----快递单号查询

猜你喜欢