JavaScript网页制作--京东快递单号查询_网页制作查询功能-CSDN博客

本文介绍了一个简单的京东快递单号查询网页实现方案。通过JavaScript监听用户输入，并实时更新显示区域的内容，实现了输入快递单号时的即时反馈效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript网页制作–京东快递单号查询

在这里插入图片描述

上篇讲到了京东网页的一个可能不被大多数人熟知的小功能，S键自动获得焦点，相比于那个功能，这个快递单号查询的功能可能更明了一点，虽然我也觉得很鸡肋。在网页搜索京东快递单号查询后，会出现这样的一个功能，当你在快递单号栏输入快递单号的时候，上方会出现一个较大的文本框，用较大的字体显示出你输入的快递单号。（虽然我觉得字号也没有差很多）

功能实现：

在输入快递单号的时候，上方出现一个盒子，这个盒子的字号更大。
表单检测用户输入，添加键盘事件。
将输入框快递单号的值获取给上方的盒子的innerText。
快递单号里面的value值为空时隐藏上方的盒子。

在这里插入图片描述

在没有输入的情况下，只显示input框

在这里插入图片描述

在输入快递单号的时候，input框上方出现一个盒子，同步输入的快递单号。

程序实现：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东快递单号查询</title>
    <style>
        div {
            width: 170px;
            height: 30px;
            border: 1px solid black;
            font-size: 20px;
        }

    </style>
</head>
<body>
    <div style="display: none;"></div>
    <input type="text">
    <button >查询</button>
    <script>
        var input = document.querySelector('input');
        var div = document.querySelector('div');
		//当input框获得焦点时
        input.addEventListener('focus',function(){
            //如果input框中的内容不为空
            if(input.value != ''){
                //显示div盒子
                div.style.display = 'block';
            }
            
            input.addEventListener('keyup',function(){
                //如果div内容为空 隐藏div
                if(input.value ===''){
                div.style.display = 'none';
                }else{
                    //div内容不为空  显示div
                div.style.display = 'block';
                    //将input中的值赋给div
                div.innerText = input.value;
                }
            })
       })
       //当input框失去焦点时隐藏div
		input.addEventListener('blur',function(){
            div.style.display = 'none';
        })
    </script>
</body>
</html>