前端基础--仿京东快递单号查询小案例

最新推荐文章于 2023-02-03 12:35:18 发布

鱼与云游

最新推荐文章于 2023-02-03 12:35:18 发布

阅读量277

点赞数

文章标签： javascript 前端 html css css3

本文链接：https://blog.csdn.net/weixin_51983027/article/details/128307739

版权

1.思路

首先点击input后，在往里面输入内容，上面的div会显现出来里面的内容和input一样，当input没有内容的时候div就会none，在者就是有focus后如果有内容div就会block，没有内容就是上面的思路，当blur时div就会none。

代码如下（示例）：

<body>
    <div class="first" style="display: none; width: 167px; height: 27px; font-size: 20px; border: 1px solid black;"></div>
    <input type="text">
    <script>
        var div=document.querySelector('.first');
        var inp=document.querySelector('input');
        inp.addEventListener('keyup',function(){
            if(this.value=='') {
                div.style.display='none';
            }
            else{
                div.style.display='block';
                div.innerHTML=inp.value;
            }
        });
        inp.addEventListener('focus',function(){
            if(this.value!=''){
                div.style.display='block';
            }
        });
        inp.addEventListener('blur',function(){
            div.style.display='none';
        })
    </script>
</body>