一个简单的输入提示框

最新推荐文章于 2023-01-17 17:12:55 发布

Roger Zhang

最新推荐文章于 2023-01-17 17:12:55 发布

阅读量203

点赞数

分类专栏： JavaScript 文章标签： html css js

本文链接：https://blog.csdn.net/weixin_45787050/article/details/103003489

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一个简单的输入提示框

#今天发现某东的填写快递单号的输入框会自动出现一行放大的字体，觉得有意思的，自己简单的模拟了一下，感兴趣的朋友可以相互交流哦🙂
初始图
输入时

js部分（css部分就简单设置一下，这里就不放啦）

<body>
    <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>
<script>
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd');
        jd_input.addEventListener('keyup', function() {
                if (this.value == '') {
                    con.style.display = 'none';
                } else {
                    con.style.display = 'block';
                    con.innerText = this.value;
                }
            })
        jd_input.addEventListener('blur', function() {
                con.style.display = 'none';
            })
        jd_input.addEventListener('focus', function() {
            if (this.value !== '') {
                con.style.display = 'block';
            }
        })
    </script>

Roger Zhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个简单的输入提示框

一个简单的输入提示框#今天发现某东的填写快递单号的输入框会自动出现一行放大的字体，觉得有意思的，自己简单的模拟了一下，感兴趣的朋友可以相互交流哦????js部分（css部分就简单设置一下，这里就不放啦）<body> <div class="search"> <div class="con">123</div> ...
复制链接

扫一扫