如何使用JavaScript触发文本框的焦点事件?
例如,在jQuery中,我们可以使用$('#textBox').focus()
来触发焦点事件。
同样地,在纯JavaScript中,我们有类似的触发功能吗?
如何使用JavaScript触发文本框的焦点事件?
例如,在jQuery中,我们可以使用$('#textBox').focus()
来触发焦点事件。
同样地,在纯JavaScript中,我们有类似的触发功能吗?
function triggerFocus(element) {
let eventType = "onfocusin" in element ? "focusin" : "focus";
let bubbles = "onfocusin" in element;
let event;
if ("createEvent" in document) {
event = document.createEvent("Event");
event.initEvent(eventType, bubbles, true);
}
else if ("Event" in window) {
event = new Event(eventType, { bubbles: bubbles, cancelable: true });
}
element.focus();
element.dispatchEvent(event);
}
focusin
事件,而另一些只支持focus
事件。它使用原生的focus
函数设置焦点,然后根据浏览器支持的事件类型分发"focusin"事件或"focus"事件。let foo = document.getElementById("foo");
triggerFocus(foo);
这是通用的,适用于任何可以接收焦点的元素。
更新 #1
jQuery的focus()
函数不会触发原生的焦点处理程序。当我混合使用通过HTMLElement.addEventListener(...)
附加的原生焦点处理程序和通过jQuery附加的焦点事件处理程序时,我遇到了一些问题。虽然jQuery.focus()
会触发使用addEventListener()
附加的处理程序,但dispatchEvent()
函数不会触发通过$("...").focus(event => { ... })
附加的事件处理程序。如果您使用这个解决方案,请记住这一点。
element
。 - Greg Burghardtelement
变量需要是 HTMLElement 的实例(或其子类之一)。基本上,您只能在 HTML 标记上触发事件。如果 element.nodeName
是 undefined
,则表示您没有支持事件的元素。 - Greg Burghardt是的,可以使用element.focus()
实现。
document.getElementById("textBox").focus();
function myFunction(x) {
x.style.background = "yellow";
}
function focusText() {
document.getElementById("textBox").focus();
}
Enter your name: <input type="text" id="textBox" onfocus="myFunction(this)">
<p>When the input field gets focus, a function is triggered which changes the background-color.</p>
<button onclick="focusText()">Focus the Textbox</button>
myFunction()
? - Ankit Chaudharyfocus
函数将焦点设置到元素,但不会触发焦点或 focusin 事件。想象一下,如果 onfocus 再次将焦点设置在同一元素上,这将触发焦点事件,执行 onfocus,再次触发焦点事件... 这很容易创建一个递归函数调用。 - Greg BurghardtElement.focus()
这不会触发onfocus事件如果需要,请参考Greg的答案。
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
Element.focus()
不会触发onfocus
事件,至少在我的测试中是这样的。Greg建议使用dispatchEvent
方法。 - Ruben Martinez Jr.