本文介绍如何利用 document.activeElement 属性判断当前获得焦点的 HTML 控件,并通过检查标签名实现特定交互逻辑。示例展示了当焦点位于 body 或 html 时,通过设置 imeMode 为 disabled 来禁用输入法,以及通过 onclick 事件触发函数获取控件名称的完整代码实现。
判断控件焦点的方法
在 JavaScript 中,可以通过访问 document.activeElement 属性来判断当前哪个对象获得了焦点。该属性的 tagName 属性返回的是标签名。
禁用输入法的示例
以下是一个具体应用场景:判断当焦点位于 body 元素时,执行关闭输入法的操作。
具体实现代码如下:
首先获取当前活动元素的标签名并转换为小写:
if(act.indexOf("body") != -1 || act.indexOf("html") != -1)
{
如果满足条件,则将 body 的 imeMode 样式设置为 'disabled',从而禁用输入法。
}
获取焦点时的控件检测此外,可以通过定义一个函数来检测控件获取焦点时的状态。例如,获取当前活动元素,并通过其 name 属性(id 和 name 较为常用)来获取控件标识,最后通过 alert 弹窗提示哪个控件获取了焦点。
在 HTML 中,可以创建两个文本输入框,分别命名为 "a" 和 "b",并设置它们的 value 为 "测试a" 和 "测试b"。为这两个输入框添加 onclick 事件,调用上述 test 函数。