javascript 如何使用javascript在文本框上触发焦点事件？

how to trigger focus event on a textbox using javascript?

提问by Ajay Gangisetti

How to trigger focus event on a textbox using javascript?

如何使用javascript在文本框上触发焦点事件？

For example in jQuery we can trigger the focus event with $('#textBox').focus().

例如在 jQuery 中，我们可以使用$('#textBox').focus().

Likewise do we have any similar trigger functionality in pure javascript?

同样，我们在纯 javascript 中有任何类似的触发器功能吗？

回答by Greg Burghardt

I had to fiddle with this finally, and came up with something that seems to work cross browser:

我最终不得不摆弄这个，并想出了一些似乎可以跨浏览器工作的东西：

function triggerFocus(element) {
    var eventType = "onfocusin" in element ? "focusin" : "focus",
        bubbles = "onfocusin" in element,
        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);
}

It takes into account that some browsers support focusinevents, and some only support focusevents. It sets focus using the native focusfunction, and then dispatches a "focusin" event or "focus" event, depending on which the browser supports.

考虑到有的浏览器支持focusin事件，有的只支持focus事件。它使用本机focus函数设置焦点，然后根据浏览器支持的情况调度“focusin”事件或“focus”事件。

Tested in:

测试于：

• Firefox 62
• Chrome 69
• Internet Explorer 11 (yeah, yeah. I know. We have to support it at work, though)
• Microsoft Edge 15

• 火狐 62
• 铬 69
• Internet Explorer 11（是的，是的。我知道。不过，我们必须在工作中支持它）
• 微软边缘 15

And to use it:

并使用它：

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

triggerFocus(foo);

This is universal and should work with any element that can receive focus.

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

回答by Ankit Chaudhary

Yes it is possible using element.focus()

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

回答by karns

Quite simple: Element.focus()

非常简单： Element.focus()

This will not trigger the onfocus eventSee Greg's answer if that is a requirement.

这不会触发 onfocus 事件如果需要，请参阅 Greg 的回答。

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

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

http://jsfiddle.net/eekn6nb9/

http://jsfiddle.net/eekn6nb9/