在Rails中设置自动对焦search_field_tag

时间:2019-08-15 19:52:52

标签: javascript ruby-on-rails

我正在尝试为autofocus: true定义的搜索字段设置search_field_tag

如果我尝试:

<%= search_field_tag search_id, 
    nil, 
    id: search_id, 
    class: 'form-control filtered-dropdown-search',
    placeholder: 'search', 
    autofocus: 'true'  %>

它产生以下HTML:

<input type="search" 
       name="dropdown-menu-search"
       id="dropdown-menu-search" 
       placeholder="search" 
       autofocus="autofocus" 
       class="form-control filtered-dropdown-search">

如果我尝试:

<%= search_field_tag search_id, 
    nil, 
    id: search_id, 
    class: 'form-control filtered-dropdown-search',
    placeholder: 'search', 
    input_html: {:autofocus => true}  %>

它产生:

<input type="search" 
       name="dropdown-menu-search" 
       id="dropdown-menu-search" 
       placeholder="search" 
       input_html="{:autofocus=>true}" 
       class="form-control filtered-dropdown-search">

我尝试了遍历Rails并也使用以下JavaScript:

document.getElementById(id).addEventListener("click", function()         
  console.log('document.activeElement was', document.activeElement)
  var search = document.getElementById(searchId)
  console.log('search is', search)
  search.focus()
  console.log('document.activeElement is now', document.activeElement)
})

输出:

document.activeElement was 
<button id="dropdown-menu-button" class="btn btn-primary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="true">
search is 
<input id="dropdown-menu-search" class="form-control filtered-dropdown-search" type="search" name="dropdown-menu-search" placeholder="search">
document.activeElement is now 
<button id="dropdown-menu-button" class="btn btn-primary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="true">

更新 这在Chrome中有效,但在Firefox中不适用...

0 个答案:

没有答案