根据用户聚焦 div 容器设置默认按钮

Question

我有一个包含 2 个部分的网页，搜索和结果。 每个部分都有一个按钮。

当用户关注搜索部分并按下回车按钮时，搜索按钮应该会触发。

同样，关注结果部分并按下回车按钮应该会触发保存更改按钮。

我尝试了以下代码，但没有得到预期的行为。任何建议/指导将不胜感激。

function SetDefaultButton(parentContainer, button) {
        $(document).off('keydown', parentContainer).
        on('keydown', parentContainer, function (event) {
            var eventTarget = event.target;
            if (event.keyCode == 13) {
                event.preventDefault();
                $(button).trigger('click');
            }
        });
    };
    
SetDefaultButton('#DivSearchSection', '#BtnSearch');

SetDefaultButton('#DivResultSection', '#BtnSave');

$('#BtnSearch').on('click', function(){
  alert('Search is triggered');
});

$('#BtnSave').on('click', function(){
  alert('Save is triggered');
});

#DivSearchSection
{
  min-height:50px;
  border:1px solid green;
  background-color:lightgreen;
}

#DivResultSection
{
  min-height:50px;
  border:1px solid red;
  background-color:yellow;
}

button{
margin-top:40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="DivContainer">
  <div id="DivSearchSection">
    This is search section.
    <button type="button" id="BtnSearch">Search</button>
  </div>  
  <div id="DivResultSection">
    This is result section.
    <button type="button" id="BtnSave">Save Changes</button>
  </div>
</div>

Answer 1

Attach an onfocus event handler 到您的部分。您需要将tabindex 属性添加到您的部分才能使其正常工作。

当该部分获得焦点时，触发其子按钮上的焦点。

$(function() {
  $('#DivSearchSection, #DivResultSection').focus(function() {
    // trigger focus on the section's button when the section is focused
    $('button', this).focus();
  });

  $('#BtnSearch').on('click', function() {
    alert('Search is triggered');
  });

  $('#BtnSave').on('click', function() {
    alert('Save is triggered');
  });
});

#DivSearchSection {
  min-height: 50px;
  border: 1px solid green;
  background-color: lightgreen;
}

#DivResultSection {
  min-height: 50px;
  border: 1px solid red;
  background-color: yellow;
}

button {
  margin-top: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="DivContainer">
  <!-- add tabindex -->
  <div id="DivSearchSection" tabindex="-1">
    This is search section.
    <button type="button" id="BtnSearch">Search</button>
  </div>
  <!-- add tabindex -->
  <div id="DivResultSection" tabindex="-1">
    This is result section.
    <button type="button" id="BtnSave">Save Changes</button>
  </div>
</div>

相关：Is it possible to write onFocus/lostFocus handler for a DIV using JS or jQuery?