MathMLElement: focus() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2023.
The focus() method of the MathMLElement interface sets focus on the specified MathML element, if it can be focused. The focused element is the element that will receive keyboard and similar events by default.
By default the browser will scroll the element into view after focusing it, and it may also provide visible indication of the focused element (typically by displaying a "focus ring" around the element). Parameter options are provided to disable the default scrolling and force visible indication on elements. If you call focus() from a mousedown event handler, you must call event.preventDefault() to keep the focus from leaving the MathMLElement.
Syntax
focus()
focus(options)
Parameters
optionsOptional-
An object for controlling aspects of the focusing process. This object may contain the following properties:
preventScrollOptional-
A boolean value indicating whether or not the browser should scroll the document to bring the newly-focused element into view. A value of
falseforpreventScroll(the default) means that the browser will scroll the element into view after focusing it. IfpreventScrollis set totrue, no scrolling will occur.
Return value
None (undefined).
Examples
Focusing a MathML element
This example uses a button to set the focus on a MathML circle element.
HTML
<div>
<math>
<msup id="myMath" tabindex="0">
<mi>x</mi>
<mn>2</mn>
</msup>
</math>
<button id="focusButton">Focus the Math</button>
</div>
JavaScript
const mathElement = document.getElementById("myMath");
document.getElementById("focusButton").addEventListener("click", () => {
mathElement.focus();
});
Result
Specifications
| Specification |
|---|
| HTML # dom-focus-dev |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
focus
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support