按任意键选中输入框，并放大显示输入的快递单号

最新推荐文章于 2021-06-24 15:31:21 发布

产品迪

最新推荐文章于 2021-06-24 15:31:21 发布

阅读量289

点赞数

分类专栏：前端文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_46054543/article/details/109718812

版权

前端专栏收录该内容

68 篇文章 0 订阅

订阅专栏

该博客介绍了如何模仿京东快递单号输入效果，通过JavaScript和HTML实现。当用户在输入框中按下任意键时，输入框获得焦点，输入的内容会实时在显示栏放大展示。

摘要由CSDN通过智能技术生成

仿京东快递单号：

先看效果图：
在这里插入图片描述

核心思路如下：

获取输入框、显示栏元素
文档document添加监听事件和设置键盘事件。按任意按钮，输入框获得焦点
输入框myIpt添加监听事件和设置键盘事件。若输入文字则出现显示栏并显示内容

结构代码如下：

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

scirpt核心代码如下：

<script>
    var showLine = document.querySelector('.showLine');
    var myIpt = document.querySelector('input');
    //按任意键 弹起的时候 输入框获得焦点
    document.addEventListener('keyup',function () {
        myIpt.focus();
    });
    //若输入了内容 则显示框出现 并显示输入的内容
    myIpt.addEventListener('keyup',function () {
        if(myIpt.value == '') {
            showLine.style.display = 'none';
        }else {
            showLine.style.display = 'block';
            showLine.innerText = this.value;
        }
    })
</script>

样式代码如下：

        * {
            padding: 0px;
            margin: 0;
        }
        .box {
            padding: 100px;
        }
        .search {
            position: relative;
            width: 178px;
            height: 100px;
        }
        .showLine {
            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;
        }
        
         /*CSS三角美化*/
        .showLine::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;
        }