1. Set element to get focus to listen for keyboard events
The most benefit of element focus is that you can allow keyboard events to be sent, and many elements of HTML can be focused by default, such as form forms, a anchor chain, but most defaults are not focused. To enable elements to focus, you can implement them in HTML code or JavaScript scripts.
Html:
Copy Code code as follows:
<div tabindex= "0" style= "height:100px;width:100px; background:red; " ></div>
Javascript:
Odiv.tabindex = 0;
Where the TabIndex is the TAB key navigation order, can have positive, negative or zero.
When the element gets the focus, it has a border indicating that if you want to not show this border, you can
Html:
Copy Code code as follows:
<div tabindex= "0" hidefocus= "on" ></div>
Javascript:
Odiv.hidefocus = ' on ';
2. The elements clearly set the focus but no effect
Sometimes the element focus is set with JavaScript, but the final focus does not fall on the element, baffled.
The problem is that if you focus on other elements in the event handler function of the focus element, you may not get the focus because if the event is a focus-focused event, such as Mouse, Keydow (keypress), and so on, it is a failure to focus directly on the other elements within the handler functions of these events.
Copy Code code as follows:
Odiv.onmousedown = function () {
document.getElementById (' IPT '). focus ();
};
Reference browser kernel process flowchart:
When the browser first reflow reflow, the focus is on another element, but after the return, the default operation will continue after the event is processed, which is to focus on the event source, which is the element of the MouseDown, causing a second reflow, When the reflow focus is on the element. So the focus in the event handler function becomes invalid.
Is there a solution? The answer is yes. It is known from the diagram that the focus can be performed only after the second reflow is returned. The SetTimeout method is used to delay the execution of the queue and so on. Because the JavaScript engine is single-threaded, the entire process is executed in a coherent way, The JS engine has not been idle in the process, when all the above operations are completed and then, the timing callback has the opportunity to be executed. So you can:
Copy Code code as follows:
Odiv.onmousedown = function () {
settimeout (function () {
document.getElementById (' IPT '). focus ();
}, 0);
};
From the above, it doesn't matter if the last millisecond is set at 0.
3. Throws an exception when focusing
In IE, an exception is thrown when the element is not visible, because in many applications we are no longer focused on whether or not the element is invisible, since even this is not a problem (who says that invisible elements cannot be focused?). Therefore, in IE under the use of Try{}catch () {} to ignore this exception.
Copy Code code as follows:
try{
Element.focus ();
}catch (e) {}
Here, the discussion of the issues related to JavaScript focus capture is done.
