Cómo deshabilitar la selección de texto e imágenes

Cómo deshabilitar la selección de texto e imágenes (HTML)

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

Aprende a deshabilitar una selección de texto e imagen en la interfaz de usuario de una aplicación de la Tienda Windows con JavaScript.

De manera predeterminada, un usuario no puede seleccionar contenido en la interfaz de usuario de la aplicación de la Tienda Windows con JavaScript.

Si quieres permitir la selección de elementos que contienen texto, imágenes y otro contenido no registrado, puedes invalidar el comportamiento predeterminado mediante una propiedad de hojas de estilo CSS: -ms-user-select.

La propiedad -ms-user-select admite los siguientes valores:

none

La selección no es posible dentro del elemento. Sin embargo, el elemento en sí puede incluirse en una selección. Este es el comportamiento predeterminado del elemento body de nivel superior y, por herencia, de todos los elementos de la interfaz de usuario de las aplicaciones de la Tienda Windows con JavaScript.

element

La selección es posible dentro del elemento (y todos los elementos secundarios). Sin embargo, la selección está limitada a los lazos del elemento.

text

La selección es posible dentro del elemento y no está limitada a los lazos del elemento.

Nota  Es obligatorio establecer esta propiedad para compartir contenido y copiar y pegar desde el Portapapeles.
 

Lo que debes saber

Tecnologías

Requisitos previos

En este tema, se supone que puedes crear una aplicación de la Tienda Windows básica con JavaScript que use la plantilla de la Biblioteca de Windows para JavaScript.

Instrucciones

Comportamientos de selección

La selección está deshabilitada para los objetos que tienen un elemento primario con el controlador de eventos click, MSGestureTap o mouseup definido.

Para invalidar este comportamiento y habilitar la selección aunque esté presente el controlador click, MSGestureTap o mouseup, debes aplicar la propiedad touch-select de CSS al objeto y asignarle el valor grippers.

La selección se cancela si llamas a preventDefault desde alguno de los siguientes controladores de eventos:

Deshabilitar una selección para todos los elementos de la interfaz de usuario

En algunos casos, puede que quieras deshabilitar específicamente la selección de todos los elementos de la interfaz de usuario de la aplicación.

En este ejemplo, se excluyen todos los elementos de la interfaz de usuario de la selección aplicando -ms-user-select, con un valor de la propiedad igual a none, al <html> elemento y a todos los elementos secundarios modificables.

Nota  Te recomendamos que también establezcas el valor de la propiedad cursor a default para asegurarte de que la información de la interfaz de usuario sea coherente en todos los elementos.
 

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

Habilitar una selección para todos los elementos de la interfaz de usuario no modificables

Si deshabilitaste la selección de manera general para toda la aplicación pero deseas invalidar esa configuración para el contenido de un elemento de la interfaz de usuario en particular, basta con que apliques el atributo -ms-user-select a ese elemento y establezcas el valor del atributo en element. Esta acción limita la selección a los lazos del elemento.

Este ejemplo permite la selección del contenido de un elemento con el identificador especificado (incluido el contenido de los elementos secundarios).

Nota  Te recomendamos que también establezcas de manera explícita el valor de la propiedad cursor en text para diferenciar la información de la interfaz de usuario para este elemento.
 

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

Temas relacionados

Directrices para seleccionar texto e imágenes
Muestras
Áreas de contenido que no pueden seleccionarse con la muestra del atributo de CSS -ms-user-select

 

 

Mostrar:
© 2016 Microsoft