单击div类a href按钮时如何关注输入元素答案

【问题标题】：How to focus on input element when click on div class a href button单击div类a href按钮时如何关注输入元素
【发布时间】：2019-12-09 13:43:37
【问题描述】：

 <ul id="top_menu">
  <li>
    <a href="#" id="arabutton" class="search-overlay-menu-btn" ><?php echo $pages->get('/')->text36;?></a>
    </li>
</ul>



        <!-- Search Menu -->
        <div class="search-overlay-menu">

                    <form  id="form-game_v2" name="form-game_v2" method="get" action="<?php $pages->get("template=home")->url ?>" >
                        <div class="typeahead__container">
                            <div class="typeahead__field">
                                <div class="typeahead__query">
                                    <input  class="js-typeahead-game_v2" id="ara" name="form" type="search" placeholder="Search"  autofocus>
                                </div>
                                <div class="typeahead__button">
                                    <button type="submit">
                                        <i class="typeahead__search-icon"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
        </div><!-- End Search Menu -->

我需要关注输入 id="ara" 当点击 id="arabutton"

我该怎么做？它是一个实时搜索系统。当点击按钮覆盖输入字段时出现类型。

实时示例：http://medilocation.com/en/treatments/pediatric-cardiology/ 单击右上角进行搜索，您会看到焦点问题。

【问题讨论】：

您使用的是 Angular、React 还是 Vue 等框架？或者你正在使用类似 JQuery 的东西？或者您正在寻找一个简单的 javascript 解决方案？如果您想得到有用的回答，这将是添加到您的问题中的好信息。
我不使用框架。但我正在使用 jquery-typeahead 脚本进行实时搜索系统。

标签： javascript html input focus element

【解决方案1】：

我终于做到了

<script>
 document.getElementById("arabutton").addEventListener("click", function(){
     setTimeout(function() { jQuery('#ara').focus() }, 20);
});
</script>

arabutton 是按钮的 id。当点击它覆盖形式来。 ara 是覆盖表单上输入字段的 id

【讨论】：

【解决方案2】：

你应该使用 JavaScript：

document.addEventListener('DOMContentLoaded', () => {
  const input = document.getElementById('ara');
  const button = document.getElementById('arabutton');

  button.addEventListener('click', () => {
    input.focus();
  })
})

【讨论】：

点击按钮时会出现覆盖表单。我认为我们应该在表单加载时将焦点放在输入字段上。

【解决方案3】：

const btn = document.querySelector('#arabutton');
const input = document.querySelector('#ara'); // or getElementById

btn.addEventListener('click', () => {
   input.focus();
});

船长？

【讨论】：

【解决方案4】：

使用 javascript 事件

<script>
  function focus(event) {
      e.preventDefalt() //to stop the redirection effect
      document.getElementById("ara").focus()
  }
 </script>
 <a onclick="focus()" id="arabutton" class="search-overlay-menu-btn">page</a>
 <input class="js-typeahead-game_v2" id="ara" name="form" type="search" placeholder="Search" autofocus>

【讨论】：