如何使用 JavaScript 触发文本框的焦点事件？

Question

如何使用 JavaScript 触发文本框的焦点事件？

javascriptfocuseventtrigger

13

如何使用JavaScript触发文本框的焦点事件？

例如，在jQuery中，我们可以使用$('#textBox').focus()来触发焦点事件。

同样地，在纯JavaScript中，我们有类似的触发功能吗？

- Ajay Gangisetti

触发onfocus事件，可以参考http://www.w3schools.com/jsref/event_onfocus.asp。 - John Powell

3个回答

2

是的，可以使用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>

- Ankit Chaudhary

这也不会触发焦点事件。 - Greg Burghardt

以上的代码片段是否没有触发文本框的onfocus监听器myFunction()？ - Ankit Chaudhary

本地的 focus 函数将焦点设置到元素，但不会触发焦点或 focusin 事件。想象一下，如果 onfocus 再次将焦点设置在同一元素上，这将触发焦点事件，执行 onfocus，再次触发焦点事件... 这很容易创建一个递归函数调用。 - Greg Burghardt

-1

很简单：Element.focus() 这不会触发onfocus事件如果需要，请参考Greg的答案。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

http://jsfiddle.net/eekn6nb9/

- karns

@Fahmi 我也是这么想的！ - karns

2

我认为我知道原因：Element.focus()不会触发onfocus事件，至少在我的测试中是这样的。Greg建议使用dispatchEvent方法。 - Ruben Martinez Jr.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Greg Burghardt · Accepted Answer

我最后不得不摆弄了一下，找到了一个似乎在各种浏览器上都能正常工作的解决方案。

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"事件。

测试过的浏览器版本如下：

- Firefox 62 - Chrome 69 - Internet Explorer 11（是的，我知道，我们在工作中必须支持它） - Microsoft Edge 15

使用方法如下：

let foo = document.getElementById("foo");

triggerFocus(foo);

这是通用的，适用于任何可以接收焦点的元素。

更新 #1

jQuery的focus()函数不会触发原生的焦点处理程序。当我混合使用通过HTMLElement.addEventListener(...)附加的原生焦点处理程序和通过jQuery附加的焦点事件处理程序时，我遇到了一些问题。虽然jQuery.focus()会触发使用addEventListener()附加的处理程序，但dispatchEvent()函数不会触发通过$("...").focus(event => { ... })附加的事件处理程序。如果您使用这个解决方案，请记住这一点。