在前端开发中，我们经常需要使用键盘导航来浏览网页或应用程序。但是，有时候我们需要将焦点设置到非链接元素，例如一个<div>元素。本文将介绍如何在 HTML 和 JavaScript 中设置键盘焦点到<div>元素，并提供示例代码。
HTML中的tabindex属性
tabindex属性定义了元素在通过键盘导航时的顺序。它可以接受正整数、0和-1作为值。当tabindex的值为一个正整数时，元素将按照其数字顺序接受键盘导航; 当tabindex的值为0时，元素将按照其在DOM中出现的顺序接受键盘导航；当tabindex的值为-1时，元素不会接受键盘导航。
我们可以将tabindex属性设置为一个正整数来使<div>元素接受键盘导航。
<div tabindex="0">设置键盘焦点到这个div</div>
JavaScript中的focus()方法
在JavaScript 中，我们可以使用focus()方法将键盘焦点设置到一个特定的HTML元素上。当调用该方法时，浏览器将把焦点设置到指定的元素上，使用户可以使用键盘导航与该元素进行交互。
const divElement = document.querySelector('#myDiv');
divElement.focus();示例代码
下面是一个示例，演示如何将键盘焦点设置到一个<div>元素上，并且在用户按下回车键时调用一个函数。
-- -------------------- ---- -------
---- ---------- -------------------------
--------
----- ---------- - ---------------------------------
-------------------------------------- --------------- -
-- ---------- --- -------- -
-------------
-
---
-------- ------------ -
------------ ---------
-
-------------------
---------在上面的代码中，我们首先定义了一个包含tabindex属性的<div>元素。然后，我们使用addEventListener()方法监听该元素上的keydown事件。当用户按下回车键时，JavaScript将调用myFunction()函数并弹出一个警告框。
最后，我们使用focus()方法将键盘焦点设置到该<div>元素上，以便用户可以直接与其进行交互。
结论
在本文中，我们介绍了如何使用tabindex属性和focus()方法将键盘焦点设置到<div>元素上，并提供了示例代码来帮助读者更好地理解这些概念。通过掌握这些技术，前端开发人员可以更好地满足用户的需求，并提高他们与网页和应用程序之间的交互性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26444