在 HTML 表单中，通常我们可以使用 ID 选择器或者 name 属性来指定某个表单控件，然后调用 focus() 方法将焦点设置在该控件上。但是有些情况下，表单控件没有 ID 或者 name 属性，这时候我们该如何将焦点设置在第一个输入元素上呢？本文将介绍一些方法和技巧。
1. 使用 tabindex 属性
tabindex 属性指定了元素在 tab 键遍历时的顺序。我们可以将 tabindex 的值设置为 0 或者正整数，表示该元素可以被 tab 键访问到。在 HTML 中，元素的 tabindex 值越小，它在 tab 键遍历中的顺序越靠前。
以下是一个示例代码：
<form> <input type="text" tabindex="1"> <input type="text" tabindex="2"> <input type="submit" value="Submit"> </form>
在上面的代码中，第一个 input 元素的 tabindex 值为 1，第二个 input 元素的 tabindex 值为 2。因此，当用户按下 tab 键时，第一个 input 元素会首先获取焦点。
需要注意的是，tabindex 属性可能会与其他事件产生冲突，例如键盘快捷键、屏幕阅读器等。因此，我们应该谨慎使用 tabindex 属性。
2. 使用 JavaScript
如果我们需要更加灵活地控制表单控件的聚焦行为，可以使用 JavaScript。以下是一个示例代码：
-- -------------------- ---- ------- ------ ------ ----------- ----------- ------ ------------ ------ ------------- --------------- ------- -------- --------------------------------------------- ---------- - ----------------------------------------- --- ---------
在上面的代码中，我们使用 document.getElementById() 方法获取第一个 input 元素，并调用 focus() 方法将焦点设置在该元素上。需要注意的是，我们将这段代码放在了 DOMContentLoaded 事件回调函数中，确保页面加载完毕后再执行。
3. 最佳实践
除了上述方法之外，还有一些最佳实践可以帮助我们更好地处理表单控件的焦点。
首先，我们应该尽可能地为每个表单控件添加 ID 或者 name 属性。这样可以方便我们使用选择器或者 DOM API 获取元素，并对其进行操作。
其次，我们应该注意表单控件的顺序，在设计时应该让用户能够自然地通过 tab 键遍历所有输入元素。
最后，我们应该避免过度使用 tabindex 属性，因为它可能会引起其他问题。只有在必要的情况下才使用 tabindex 属性，并且要保证 tabindex 值的唯一性和可预测性。
总结
在本文中，我们介绍了如何将焦点设置为独立于 ID 的 HTML 表单中的第一个输入元素。我们可以使用 tabindex 属性、JavaScript 或者其他最佳实践来解决这个问题。无论采用哪种方法，都需要谨慎处理表单控件的聚焦行为，以确保用户能够自然地操作表单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12031