Question

我的导航栏中有一个按钮，可将搜索栏的可见性从隐藏状态切换为显示状态，并且希望单击鼠标时将光标切换到文本框。我在此处阅读了一些旧的答案，这些答案表明不可能将焦点切换到隐藏元素，但是想知道是否有可能在两个函数之间添加延迟，以便当浏览器尝试将焦点切换到文本框时它不再隐藏。

例如->单击以使搜索栏可见-> 100ms延迟->将焦点切换到文本栏。

我知道切换搜索栏的位置或不透明度可能会产生相同的结果，但是这样做似乎会使页面上其他元素的位置搞砸了，因此很想在我的当前代码下找到解决方案可能。显然，任何帮助将不胜感激。

我的onclick函数：


<script type="text/javascript">

function showMe() {
   var foo = document.getElementById('searchbar');

   if(foo.style.display == '' || foo.style.display == 'none'){
        foo.style.display = 'block';
   }
   else {
        foo.style.display = 'none';
   }
}

</script>

Answer 1

尝试

<script type="text/javascript">

function showMe() {
   var foo = document.getElementById('searchbar');

   if(foo.style.display == '' || foo.style.display == 'none'){
        foo.style.display = 'block';
        setTimeout( () => foo.focus(), 500);
   }
   else {
        foo.style.display = 'none';
   }
}

</script>

单击时将焦点切换到隐藏的文本框

1 个答案: