Fork me on GitHub



new MathField(element: Element, config: object)

To create a mathfield, you would typically use MathLive.makeMathField() instead of invoking directly this constructor.


  • Method names that begin with $ are public.
  • Method names that begin with an underbar _ are private and meant to be used only by the implementation of the class.
  • Method names that end with an underbar _ are selectors. They can be invoked by calling MathField.$perform(). Note that the selector name does not include the underbar.

For example:

element : Element

The DOM element that this mathfield is attached to. Note that element.mathfield is this object.

config : object

See MathLive.makeMathField() for details

element : Element

The DOM element this mathfield is attached to.

config : [string]:any

A set of key/value pairs that can be used to customize the behavior of the mathfield

id : string

A unique ID identifying this mathfield

keystrokeCaptionVisible : boolean

True if the keystroke caption panel is visible

virtualKeyboardVisible : boolean

True if the virtual keyboard is visible

inlineShortcutBuffer : string

The last few keystrokes, to look out for inline shortcuts

inlineShortcutStates : object[]

The saved state for each of the past keystrokes


$el(): Element

Return the DOM element associated with this mathfield.

Note that this.$el().mathfield = this

: Element   

$insert(s: string, options?: [string]:any)

This method can be invoked as a selector with $perform("insert") or called explicitly.

It will insert the specified block of text at the current insertion point, according to the insertion mode specified.

After the insertion, the selection will be set according to the selectionMode.

s : string

The text to be inserted

options : [string]:any = {}
options.selectionMode : string

Describes where the selection will be after the insertion:

  • 'placeholder': the selection will be the first available placeholder in the item that has been inserted) (default)
  • 'after': the selection will be an insertion point after the item that has been inserted),
  • 'before': the selection will be an insertion point before the item that has been inserted) or 'item' (the item that was inserted will be selected).

options.format : string

The format of the string s:

  • 'auto': the string is interpreted as a latex fragment or command) (default)
  • 'latex': the string is interpreted strictly as a latex fragment

options.focus : boolean

If true, the mathfield will be focused after the insertion : boolean

If true, provide audio and haptic feedback

$keystroke(keys: string, evt: Event): boolean

keys : string

A string representation of a key combination.

For example 'Alt-KeyU'.

See W3C UIEvents

evt : Event
: boolean   

$latex(text: string, options: [string]:any): string

If text is not empty, sets the content of the mathfield to the text interpreted as a LaTeX expression. If text is empty (or omitted), return the content of the mahtfield as a LaTeX expression.

text : string
options : [string]:any
options.suppressContentChangeNotifications : boolean

If true, the handlers for the contentWillChange and contentDidChange notifications will not be invoked. Default false.

: string   

$perform(command: string | string[])

command : string | string[]

A selector, or an array whose first element is a selector, and whose subsequent elements are arguments to the selector. Note that selectors do not include a final "_". They can be passed either in camelCase or kebab-case. So:


both calls are valid and invoke the same selector.


Revert this math field to its original content. After this method has been called, no other methods can be called on the MathField object. To turn the element back into a MathField, call MathLive.makeMathField() on the element again to get a new math field object.

$selectedText(format?: string): string

Return a textual representation of the selection in the mathfield.

format : string = 'latex'

One of

  • 'latex'
  • 'latex-expanded' : all macros are recursively expanded to their definition
  • 'spoken'
  • 'spoken-text'
  • 'spoken-ssml'
  • 'mathML'
  • 'json'

: string   

$selectionAtEnd(): boolean

Return true if the selection extends to the end of the selection group.

: boolean   

$selectionAtStart(): boolean

Return true if the selection starts at the beginning of the selection group.

: boolean   

$selectionDepth(): number

Return the depth of the selection group. If the selection is at the root level, returns 0. If the selection is a portion of the numerator of a fraction which is at the root level, return 1. Note that in that case, the numerator would be the "selection group".

: number   

$selectionIsCollapsed(): boolean

Return true if the length of the selection is 0, that is, if it is a single insertion point.

: boolean   

$setConfig(config?: [string]:any)

Update the configuration options for this mathfield.

config : [string]:any = {}

See Configuration options for details.

$text(format?: string): string

Return a textual representation of the mathfield.

format : string = 'latex'

One of

  • 'latex'
  • 'latex-expanded' : all macros are recursively expanded to their definition
  • 'spoken'
  • 'spoken-text'
  • 'spoken-ssml'
  • 'mathML'
  • 'json'

: string   

$typedText(text: string)

Simulate a user typing the keys indicated by text.

text : string

A sequence of one or more characters.


Return the (x,y) client coordinates of the caret

_onAnnounce(target: object, command: string, oldMathlist?: Atom[], atomsToSpeak?: Atom[])private

Announce a change in selection or content via the aria-live region. This is the default implementation for this function. It can be overridden via config.onAnnounce

target : object

typically, a MathField

command : string

the command that invoked the change

oldMathlist : Atom[] = []

the previous value of mathlist before the change

atomsToSpeak : Atom[] = []

_onKeystroke(keystroke: string, evt: Event)private

keystroke : string
evt : Event

optional, an Event corresponding to the keystroke


Completes an operation in progress, for example when in command mode, interpret the command



Lay-out the math field and generate the DOM.

This is usually done automatically, but if the font-size, or other geometric attributes are modified, outside of MathLive, this function may need to be called explicitly.