【原生JS实现】搜索框聚焦显示盒子，点击盒子以外的地方，盒子隐藏

最新推荐文章于 2024-05-17 13:52:13 发布

DA_ttack

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量1.6k

点赞数

分类专栏：原生Js 文章标签： javascript html

本文链接：https://blog.csdn.net/DA_ttack/article/details/124931786

版权

原生Js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在很多网站中，它们的搜索框在获得焦点的时候，会在其下方显示列表或者盒子，并且只有在点击列表或者盒子以外的区域才会再次隐藏。

下面来实现这种功能

<body>
    <input type="text" placeholder="输入城市、乡镇、景点名称">
    <button>搜 索</button>
    <div class="box1">
        <h4>热门城市</h4>
        <ul>
            <li><a href="#">杭州天气</a></li>
            <li><a href="#">北京天气</a></li>
            <li><a href="#">广州天气</a></li>
            <li><a href="#">深圳天气</a></li>
            <li><a href="#">武汉天气</a></li>
            <li><a href="#">南京天气</a></li>
            <li><a href="#">济南天气</a></li>
            <li><a href="#">苏州天气</a></li>
        </ul>
    </div>
    <script>
        var bodys = document.body;
        var inputs = document.getElementsByTagName('input');
        var box = document.getElementsByClassName('box1');
        bodys.style.backgroundColor = "skyblue";

        inputs[0].addEventListener('click',function(e){
            box[0].style.display = 'block';
            e.stopPropagation()
        });
        box[0].addEventListener('click',function(e){
            e.stopPropagation()
        });
        document.addEventListener('click',function(e){
            box[0].style.display = 'none'
        })
    </script>
</body>

在用原生的js实现上述功能的时候，有几个需要注意的地方：

1、getElementsBy...这类获取元素的方法，所得到的是一个伪数组，在使用时要注明下标；

2、如果页面同类标签只有一个的时候，用queryselecter获取，则可以直接使用；

3、在实现搜索框聚焦显示盒子，点击搜索框以及盒子以外的区域隐藏盒子的功能里，需要活用事件流，活用阻止冒泡的功能：

（1）点击文本框，盒子显示（要注意的是，用click事件，而不是focus）；

（2）盒子的点击事件阻止冒泡；

（3）点击文档（document）盒子隐藏。

以上。