12

How to trigger focus event on a textbox using javascript?

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

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

Simon
  • 3,667
  • 1
  • 35
  • 49
Ajay Gangisetti
  • 431
  • 2
  • 5
  • 13

2 Answers2

19

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

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);
}

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

Tested in:

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

And to use it:

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

triggerFocus(foo);

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

Update #1

The jQuery focus() function will not trigger native focus handlers. I hit a bit of snag when mixing native focus handlers attached via HTMLElement.addEventListener(...) and focus event handlers attached via jQuery. While jQuery.focus() will trigger handlers attached using addEventListener(), the dispatchEvent() function will not trigger event handlers attached via $("...").focus(event => { ... }). Just bear that in mind if you use this solution.

Greg Burghardt
  • 17,900
  • 9
  • 49
  • 92
  • "root is not defined" What is root?? – beliha Nov 26 '19 at 11:58
  • @beliha: sorry about that. I had a typo in the code, which I corrected. It should be `element` instead. – Greg Burghardt Nov 26 '19 at 13:15
  • Fantastic. This should be the accepted answer, it's the only that works! – beliha Nov 27 '19 at 19:42
  • Hey, actually, I feel this answer is good one, but I got this error 'Uncaught TypeError: element.dispatchEvent is not a function' on firefox 102 version. maybe, what is my mistake? – jis0324 Aug 01 '22 at 19:06
  • @jis0324: The `element` variable needs to be an instance of HTMLElement (or one of its sub-classes). Basically you can only trigger an event on an HTML tag. If `element.nodeName` is `undefined` you do not have an element that supports events. – Greg Burghardt Aug 01 '22 at 19:15
  • 1
    alright, the element was the jquery selector, it was list. I just tried with element[0], and it works. thanks. – jis0324 Aug 01 '22 at 20:16
-1

Quite simple: Element.focus()

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

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

http://jsfiddle.net/eekn6nb9/

karns
  • 5,391
  • 8
  • 35
  • 57