Editing

Article
11/05/2015

Internet Explorer 11 provides a more predictable and controllable experience around caret navigation and other rich editing scenarios. We've refactored the codebase for editing in IE11 to add the following new features, and additionally fixed a number of bugs, including issues with textarea cursor behavior.

Accessibility improvements

IE11 on Windows 8.1 introduces Input Method Editor API accessibility support. This support includes new Microsoft Active Accessibility (MSAA)property change events for when a composition replacement happens, when a composition is finalized, and when the conversion target changes. Users can take advantage of IME accessibility support with Windows Narrator or other assistive technologies simultaneously as they compose with IE11 editing controls, instead of having to commit and then review their text.

IE11 also adds accessibility support for the “clear” button in the text input control (in Internet Explorer, this renders as a black ‘X’ at the end of the text box), which is now included in the Windows accessibility treeas the first child of the text input control. Assistive technology users can simply click the "clear" button (the black 'X') to clear the text content rather than selecting all the text in the control and then deleting it.

Additional accessibility improvements include MSAA notifications for when an autocorrection happens, and bug fixes around contenteditable scenarios and text attribute identification.

Clipboard support for images

Starting with IE11, images pasted from the clipboard are base64 encoded by default. Users can now easily and safely copy and paste images from their local file system into contenteditable regions of a website. Prior to IE11, pasting a local image on a live website (across security zones) resulted in a broken image icon, as a security measure to prevent local file access. When copied to the clipboard, images that are not accessible will have their src set to "" for security purposes.

Note The default base64 image encoding only applies to IE11, and not Windows Store app using JavaScript on Windows 8.1.

IE11 also provides the clipboardData.files property and new msConvertURL method to avoid default base64 encoding and use blobs and object URLs to display the images instead; or even opt out of any image src attribute conversion altogether.

This code shows how to convert pasted clipboard images into blobs.

var blobList = [];

document.getElementById("pasteZone").addEventListener('paste', handlePaste, false);

function handlePaste(evt) {
  var fileList = window.clipboardData.files; // Note that window.DataTransfer.files is not applicable.

  if (!fileList) {
    console.log("fileList is null.");
    return;
  }

  for (var i = 0; i < fileList.length; i++) {
    var file = fileList[i];
    var url = URL.createObjectURL(file);

    if (evt.convertURL) { // Use standard if available.
      evt.convertURL(file, "specified", url);
    } else {
      evt.msConvertURL(file, "specified", url);
    }

    console.log("Local file: " + file.name + " (" + file.size + ")");
    blobList.push(file);
  } // for
} // handlePaste

Command identifiers

IE11 introduces several new execCommand methods for fine-tuned control of the editing undo stack and paragraph separation in rich editing scenarios.

The following methods enable script-based editing to participate in the undo history and give you better control of the editing experience of your app:

Command identifier	Description
ms-beginUndoUnit	Starts an undo unit. Any DOM changes between ms-beginUndoUnit and ms-endUndoUnit (including any changes from script) are collected into an undo unit and undone and redone as if they were a single command.
ms-clearUndoStack	Clears the undo history.
ms-endUndoUnit	Ends an undo unit.

The following method has been added for controlling paragraph separation:

Command identifier	Description
DefaultParagraphSeparator	Sets the default element (p or div) to use when creating new paragraph blocks in plain text (for example, when pressing Enter).

Controls improvements

In addition to a newly touch-optimized UI for the datalist control, IE11 also brings a number of bug fixes. Additionally, select control option elements now have CSS style support to give you fine-tuned control over the appearance of the dropdown items, such as color and font styles. This enables editing scenarios like a font picker control, where users can preview different font styles in a dropdown before choosing which font to use.

Input Method Editor API

IE11 introduces 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.

For details, see Input Method Editor API.

Share via