Summary of effective methods for capturing JavaScript focus

1. Set the element to get focus to listen for Keyboard Events
The biggest advantage of element focus is that keyboard events can be sent. By default, many elements in HTML can be focused, such as form elements and a-anchor links. However, most elements cannot be focused by default. To enable element focus, it can be implemented in HTML code or JavaScript scripts.
Html: Copy codeThe Code is as follows: <div tabIndex = "0" style = "height: 100px; width: 100px; background: red;"> </div>

JavaScript:
ODiv. tabIndex = 0;
Here, tabIndex is the navigation order of the TAB key, which can be positive, negative, or zero.
When the element gets the focus, a border is displayed. If you want to hide this border, you can
Html:Copy codeThe Code is as follows: <div tabIndex = "0" hidefocus = "on"> </div>

JavaScript:
ODiv. hideFocus = 'on ';
2. The element clearly sets the focus, but it does not work.
Sometimes the element focus is set with JavaScript, but the final focus is not placed on the element, which cannot be understood.
The problem is that if you focus on other elements in the event handler function of the Focal Point element, you may not be able to get the focus, because if the event is an event that can get the focus, such as mouse, keydow (keypress) and so on. It fails to directly focus on other elements in the processing functions of these events.Copy codeThe Code is as follows: oDiv. onmousedown = function (){
Document. getElementById ('ipt'). focus ();
};

Refer to the browser kernel processing flowchart:

After the browser returns Reflow for the first time, the focus is on another element, but after the return, the default operation will continue after the event is processed, that is, the focus will be on the event source, this is the element of mousedown, which leads to the second backflow. After the backflow, the focus is concentrated on this element. so the focus in the event processing function becomes invalid.

Is there a solution? The answer is yes. the figure shows that you only need to focus on the second Reflow and execute it. the setTimeout method can be used to put the latency into the queue before execution. because of the single-threaded nature of the JavaScript engine, the entire process on the graph is executed continuously, and the JS engine has never been idle during this process. After all the above operations are completed, scheduled callback can be executed. so you can:Copy codeThe Code is as follows: oDiv. onmousedown = function (){
SetTimeout (function (){
Document. getElementById ('ipt'). focus ();
}, 0 );
};

It can be seen from the above that the last millisecond does not matter even if it is set to 0.

3. Thrown exceptions during Focus
In IE, if an element is not visible, an exception will be thrown if it is focused, because in many applications, we tend to focus on whether the element is invisible or not, because even so, there is no problem (who says that invisible elements cannot be focused ?).. Therefore, you can use try {} catch () {} in IE to ignore this exception.Copy codeThe Code is as follows: try {
Element. focus ();
} Catch (e ){}

At this point, the discussion about the JavaScript focus capture is complete.