javascript - 单击按钮将光标置于搜索表单中

Question

我有一个不可见的搜索表单，仅在单击按钮时才会出现。

是否有可能当您单击按钮时，光标直接出现在搜索字段中？ “自动对焦”属性在这里不起作用。是否有脚本解决方案？

搜索表单:

<div id="searchform">
    <form action="bla" method="post">
        ... <input type="text" name="item" id="search" placeholder="bla" autofocus /> ...
    </form>
</div>

按钮:

<a id="button"></a>

脚本:

<script>
    $(document).ready(function(){
        $('#searchform').hide();
        $("#button").click(function(){
            $("#searchform").slideToggle("fast");
        });
    });
</script>

Answer 1

要执行您需要的操作，请在使输入可见时调用focus():

$(document).ready(function() {
  $("#button").click(function() {
    $("#searchform").slideToggle("fast");
    $('#search').focus();
  });
});

#searchform { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="searchform">
  <form action="bla" method="post">
    <input type="text" name="item" id="search" placeholder="bla" autofocus /> ...
  </form>
</div>

<a id="button">Toggle form</a>

请注意，我使用 CSS 而不是 JS 来隐藏加载时的 #searchForm 元素，因为这样可以避免该元素在 DOM 准备就绪之前的几分之一秒内可见(也称为 FOUC ) .