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属性才能生效。

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

＆＃13;

$(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');
  });
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

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

1 个答案: