input框失焦bug问题解决

最新推荐文章于 2024-01-10 16:04:15 发布

李不强

最新推荐文章于 2024-01-10 16:04:15 发布

阅读量1.1k

点赞数 8

文章标签： bug 前端 javascript

本文链接：https://blog.csdn.net/wyzh2000/article/details/131893396

版权

文章讨论了一个前端开发中的问题，即输入框聚焦显示列表、失焦隐藏列表的功能实现。当点击列表项时，由于失焦事件先于点击事件触发，导致无法获取列表项内容。文中提出了三种解决方案：1)改为按下事件触发；2)失焦事件延迟触发；3)监听document的冒泡事件来处理交互。这些方法有效地避免了事件顺序导致的问题。

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

问题引入

假设有这样一个功能需求，input框聚焦时，框下方列表会显示，而失焦时列表会隐藏，列表点击时应拿到对应列表项内容，然后进行对于输入框的渲染或其他操作。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            display: none;
        }
    </style>
</head>
<body>
    <input type="text" id="ipt">
    <ul id="ul">
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</body>
<script>
    ipt.onfocus=()=>{
        ul.style.display='block'
    }
    ipt.onblur=()=>{
        ul.style.display='none'
    }
    ul.onclick=(e)=>{
        ipt.value=e.target.innerText
    }
</script>
</html>

上述代码会产生这样一个bug：当ul的点击事件触发时，会先触发失焦事件，让ul隐藏，然后再触发点击事件，而此时点击拿不到ul中的li数据，这就好比在某人坐下瞬间抽掉板凳一样。

问题解决

面对上述问题，有以下三种解决方式：

法1：将点击触发改为按下时触发

如果改成按下时就触发，那么事件发生过程为触发按下事件然后才触发失焦事件，代码改为：

    //不变
    ipt.onblur=()=>{
        setTimeOut(()=>{
            ul.style.display='none'
        },100)
    }

    ul.onmousedown=(e)=>{
        ipt.value=e.target.innerText
    }

法2：将失焦事件延迟触发

如果将失焦事件添加延迟效果，那么事件触发过程就是在失焦延迟的过程中触发点击事件，延迟结束后点击事件已经运行完成，再触发失焦效果。代码修改如下：

    ipt.onblur=()=>{
        setTimeOut(()=>{
            ul.style.display='none'
        },100)
    }
    //不变
    ul.onclick=(e)=>{
        ipt.value=e.target.innerText
    }

法3：监听document的冒泡事件

这种方法是利用事件冒泡，判断点击事件的触发源，控制ul的显示或隐藏的同时获得对应li的值

    let html=document.querySelector('html')
    html.onclick=(e)=>{
        if(e.target.nodeName!=='INPUT'){
            console.log(e.target.nodeName)
            ul.style.display='none';
        }
    }
    //不变
    ul.onclick=(e)=>{
        ipt.value=e.target.innerText
    }
    //不需要设置失焦事件