Microsoft Edge supports a set of APIs that enable web applications to provide a better Input Method Editor (IME) input experience. For example, the IME API provides composition information for auto-complete or search suggestions, and enables you to avoid user interface collisions between an IME candidate window and a search suggestion list.
The implementation is based off Microsoft's IME API spec proposal to the World Wide Web Consortium (W3C). Full support of this feature is available when using the native Windows 8.1 and Windows 10 IMEs.
The MSInputMethodContext object
The MSInputMethodContext represents IME functionality for a single element and provides information about the current status of IME composition. Use the msGetInputMethodContext method to obtain the MSInputMethodContext for a given element:
var testElement = document.getElementById("test");
var testElementIMEContext = testElement.msGetInputContext();
You can register handlers for the following MSInputMethodContext events:
| Event | Description |
|---|---|
| candidatewindowshow | Fires immediately after the IME candidate window is set to appear, but before it renders. |
| candidatewindowupdate | Fires after the IME candidate window has been identified as needing to change size, but before any visual updates have rendered. |
| candidatewindowhide | Fires after the IME candidate window is fully hidden. |
The MSInputMethodContext object has the following properties:
| Property | Description |
|---|---|
| target | Returns the element associated with the MSInputMethodContext. |
| compositionStartOffset | Returns the starting offset (character position) of the composition relative to the target if a composition is occurring, or zero if there is no composition in progress. |
| compositionEndOffset | Returns the ending offset (character position) of the composition relative to the target if a composition is occurring, or zero if there is no composition in progress. |
The MSInputMethodContext object supports the following methods:
| Method | Description |
|---|---|
| hasComposition | Returns true if there is a composition in progress, and false otherwise. |
| getCompositionAlternatives | Returns a copy of the current list of alternate candidate strings from the MSInputMethodContext object. |
| isCandidateWindowVisible | Returns true if the IME candidate window UI is visible, and false otherwise. |
| getCandidateWindowClientRect | Returns a ClientRect object with candidate window coordinate space information (if the IME candidate window is visible). |
CSS support
Additionally, the -ms-ime-align CSS property is supported for controlling the alignment of the IME candidate window.
This property aligns the IME candidate window box relative to the element on which the IME composition is active. The following values are supported:
- auto : Initial value. The IME may align the candidate window in any manner.
- after : The IME should attempt to align the candidate window below the element (in left-to-right and right-to-left layouts).