jQuery focusin() 方法

17 Mar 2025 | 阅读 2 分钟

focusin() 方法用于绑定一个函数,当一个元素或其内部的任何元素获得焦点时,该函数将被执行。当元素通过 Tab 键导航或鼠标点击被选中时,元素会获得焦点。它与 focus() 方法不同之处在于,focusin() 方法在元素的子元素获得焦点时也会触发。

focusin() 方法通常与 focusout() 方法 一起使用。

语法

此方法接受单个参数,定义如下 -

function: 指定在发生 focusin 事件时执行的函数。

现在让我们通过一个例子来理解 focusin() 方法。

示例

在这个例子中,我们使用 focusin() 方法来改变 div 元素在它或它内部的任何元素获得焦点时的样式。这里有一个 div 元素,包含一个文本框和一个按钮。当用户点击文本框或按钮内部时,会触发 focusin 事件,并且 div 元素的背景颜色会改变。

如果我们使用 focus() 方法而不是 focusin() 方法,那么在点击 div 元素 内部的元素时将不会发生任何事情。这是因为 focus() 方法在元素的子元素获得焦点时不会触发。

立即测试

输出

执行上述代码后,我们将得到以下输出:

jQuery focusin() method

点击文本框内部后,输出将是:

jQuery focusin() method