检查输入元素是否具有焦点 - Javascript

在前端开发中，我们经常需要检查一个输入元素（如文本框、下拉框、复选框等）是否具有焦点，以便在某些事件（如按键按下、鼠标点击等）触发时进行相应的处理。本文将介绍一些Javascript代码片段，用于检查输入元素是否具有焦点。

方法1：使用document.activeElement属性

Javascript的document对象有一个activeElement属性，该属性返回当前具有焦点的元素。因此，我们可以使用下面的代码来判断一个元素是否具有焦点：

function hasFocus(elem) {
  return elem === document.activeElement;
}

上述代码中的hasFocus函数接受一个参数elem，表示需要检查的元素。函数返回true表示该元素具有焦点，返回false表示该元素没有焦点。

方法2：使用元素的is(':focus')方法

如果你使用了jQuery库，那么可以使用下面的代码来检查一个元素是否具有焦点：

function hasFocus(elem) {
  return $(elem).is(':focus');
}

上述代码中的hasFocus函数与方法1的函数相似，只不过它使用了jQuery库的is(':focus')方法来检查元素是否具有焦点。

示例代码

下面是一些示例代码，展示如何使用上述函数来检查输入元素是否具有焦点：

// 检查id为'textbox'的文本框是否具有焦点
var textbox = document.getElementById('textbox');
if (hasFocus(textbox)) {
  alert('文本框具有焦点');
} else {
  alert('文本框没有焦点');
}

// 检查id为'selectbox'的下拉框是否具有焦点
var selectbox = document.getElementById('selectbox');
if (hasFocus(selectbox)) {
  alert('下拉框具有焦点');
} else {
  alert('下拉框没有焦点');
}

// 检查id为'checkbox'的复选框是否具有焦点
var checkbox = document.getElementById('checkbox');
if (hasFocus(checkbox)) {
  alert('复选框具有焦点');
} else {
  alert('复选框没有焦点');
}

总结

本文介绍了两种Javascript代码片段，用于检查输入元素是否具有焦点。通过本文的学习，你可以更加方便地编写需要判断元素焦点的前端代码。