How to disable text and image selection (HTML)

  • Article

Learn how to disable text and image selection in the UI of a Windows Store app using JavaScript.

By default, a user cannot select content in the UI of your Windows Store app using JavaScript.

If you want to allow selection of elements that contain text, images, and other non-proprietary content, you can override the default behavior by using a Cascading Style Sheets (CSS) property: -ms-user-select.

The -ms-user-select property supports the following values:

  • none
    Selection is not possible within the element. However, the element itself can be included within a selection. This is the default behavior for the top-level body element and, by inheritance, all UI elements in Windows Store apps using JavaScript.

  • element
    Selection is possible within the element (and all child elements). However, the selection is constrained to the bounds of the element.

  • text
    Selection is possible within the element and is not constrained to the bounds of the element.

Note  Setting this property is required to share content and copy and paste from the clipboard.

 

What you need to know

Technologies

Prerequisites

This topic assumes that you can create a basic Windows Store app using JavaScript that uses the Windows Library for JavaScript template.

Instructions

Selection behaviors

Selection is disabled for objects that have a parent element with a click, MSGestureTap, or mouseup event handler defined.

To override this behavior and enable selection even if click, MSGestureTap, or mouseup handlers are present, you must apply the touch-select CSS property to the object and assign the property a value of grippers.

Selection is canceled if you call preventDefault from any of the following event handlers:

Disable selection for all UI elements

In some cases, you might like to specifically disable selection for all UI elements within your app.

This example excludes all UI elements from selection by applying -ms-user-select, with a property value of none, to the <html> element and all editable child elements.

Note  We recommend that you also set the value of the cursor property to default to ensure consistent UI feedback across all elements.

 

html  input, textarea, *[contenteditable=true] 
{
    -ms-user-select: none;
    cursor: default;
}

Enable selection for non-editable UI elements

If you've shut down selection globally across your app, but would like to override this setting for the content of a particular UI element, just apply the -ms-user-select attribute to that element and set the attribute value to element. This constrains selection to the bounds of the element.

This example allows selection for the content of an element with the specified ID (including the content of child elements).

Note  We recommend that you also explicitly set the value of the cursor property to text to differentiate UI feedback for this element.

 

#selectableDiv 
{
    -ms-user-select: element;
    cursor: text;
}

Guidelines for selecting text and images

Samples

Unselectable content areas with -ms-user-select CSS attribute sample