JavaScript中document.activeElement焦点元素介绍

在JavaScript中，document.activeElement属性可以访问当前页面中拥有焦点的元素。当用户点击或键盘输入时，焦点会跳转到对应的元素上。这个元素就是当前页面中的焦点元素。

访问焦点元素

可以使用JavaScript代码来访问当前页面中的焦点元素：

var activeElement = document.activeElement;
console.log(activeElement);

上述代码中，document.activeElement属性返回焦点元素的引用。我们可以把它保存到一个变量中，便于后续操作。

应用场景

验证表单输入

一个常见的场景是，当用户输入表单数据时，我们需要验证它的合法性。使用document.activeElement属性，我们可以很方便地访问当前输入框的值：

var inputElement = document.activeElement;
if (inputElement.tagName === 'INPUT' && inputElement.type === 'text') {
  var inputValue = inputElement.value;
  // 现在我们可以验证输入框的值了
}

上述代码中，我们首先通过document.activeElement获取到当前输入框元素，并判断它是否是<input type="text">类型的元素。如果是，就可以获取它的值，然后进行验证。

在表单中添加标签

另一个应用场景是，在表单中添加标签。假设我们有一个包含多个输入框和一个“添加标签”按钮的表单。当用户点击按钮时，我们需要在当前焦点输入框下面插入一个标签。可以使用下面的代码实现：

var inputElement = document.activeElement;
var newTag = document.createElement('span');
newTag.innerText = 'New Tag';
inputElement.parentElement.insertBefore(newTag, inputElement.nextSibling);

上述代码中，我们首先通过document.activeElement获取到当前焦点的输入框元素。然后创建一个新的<span>元素，并设置它的文本内容为“New Tag”。最后使用parentElement.insertBefore()方法，将新标签插入到当前输入框的下面。

总结

document.activeElement属性是一个非常有用的 API，可以帮助我们在对输入框进行验证、添加操作时更加方便快捷。