Question

我使用Tab键选择一个div。当我使用Tab键选择该div并单击Enter时，我要执行一个功能。我正在使用的代码如下：

$(document).on('keydown', '#tree', function (event) {

        if (event.keyCode === 13) {debugger
                if($(".userLi").is( ":focus" )){
                    debugger
                } 
        }
    });

但是这个焦点div对我没有帮助。有什么主意要这样做吗？

Answer 1

您需要执行(".userLi:focus")才能获得焦点突出的.userLi元素。如果元素未聚焦，则代码$(".userLi").is( ":focus" )将返回布尔值。但不是实际的重点。

Answer 2

如果要允许Tab键专注于div元素，则需要为其添加一个tabindex属性。请注意，这可能不适用于较旧的浏览器。

从那里，您可以使用传递给处理程序函数的事件的target属性来引用引发事件的单个div。试试这个：

$(document).on('keyup', '#tree', function(e) {
  if (e.which == 13)
    showTextInConsole($(e.target).text());
});

function showTextInConsole(text) {
  console.log(text);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tree">
  <div tabindex="1">One</div>
  <div tabindex="2">Two</div>
  <div tabindex="3">Three</div>
  <div tabindex="4">Four</div>
  <div tabindex="5">Five</div>
</div>

使用Tab键选择一个div并在Enter键上添加事件

2 个答案: