Como impedir (o habilitar) la selección de texto en tu página web mediante CSS

La propiedad -ms-user-select es una nueva propiedad de las Hojas de estilo CSS que permite a los desarrolladores web y a los desarrolladores de aplicaciones controlar dónde pueden los usuarios seleccionar texto en sus páginas web o aplicaciones de la Tienda Windows con JavaScript. En este tema te enseñamos a implementar la propiedad -ms-user-select en tu propia página web. (La propiedad -ms-user-select se implementa en una aplicación de la Tienda Windows con JavaScript exactamente de la misma forma). Incluye las siguientes secciones:

Nota  Actualmente, la propiedad user-select no forma parte de ninguna especificación CSS del  World Wide Web Consortium (W3C). Originalmente estaba propuesta en el módulo de interfaz de usuario para CSS3, pero este módulo ha sido reemplazado por el módulo de interfaz de usuario básica para CSS3, que no contiene la propiedad user-select. Otros importantes exploradores admiten sus propias versiones prefijadas de esta propiedad. Como hay pequeñas diferencias entre las tres implementaciones, asegúrate de probar tu aplicación en diferentes exploradores.

Introducción

La capacidad de seleccionar texto de páginas web es importante para los usuarios en muchas situaciones. Piensa en el típico sitio de noticias. La mayoría de las páginas incluyen artículos con noticias; es muy posible que los usuarios quieran seleccionar contenido para compartirlo. Sin embargo, habitualmente la página también contiene menús, anuncios y vínculos a otras partes del sitio que los usuarios probablemente no necesiten o deseen seleccionar. Con la compatibilidad con la nueva propiedad CSS -ms-user-select en Internet Explorer 10, puedes especificar, por ejemplo, que la selección de texto esté permitida en el cuerpo principal del artículo de noticias, pero no en los menús.

Uso de -ms-user-select

La propiedad -ms-user-select tiene cuatro posibles valores:

Palabra claveDescripción

element

El texto se puede seleccionar cuando la selección comienza en el elemento especificado. Sin embargo, la selección de texto está limitada a los límites de ese elemento.

none

El texto no se puede seleccionar cuando la selección comienza en el elemento especificado. Sin embargo, la selección de texto que comienza fuera del elemento especificado puede seguir entrando en el elemento.

text

El texto se puede seleccionar cuando la selección comienza en el elemento especificado. La selección de texto no está restringida a los límites del elemento, y puede extenderse más allá de sus límites.

auto

Este es el valor inicial. Si el elemento contiene texto editable como un elemento input o un elemento con contenteditable establecido en "true", el texto se puede seleccionar. De lo contrario, la selección se determina con el valor de la propiedad -ms-user-select del nodo principal.

 

Volviendo a nuestro ejemplo de sitio de noticias, podrías, por ejemplo, establecer -ms-user-select en "none" en toda la página y luego establecer -ms-user-select en "element" en el artículo principal. De esta forma, solo se podrá seleccionar el texto del artículo. Las personas que quieran seleccionar el contenido de un artículo de noticias probablemente no quieran seleccionar los elementos del pie de página a continuación del artículo. Por lo tanto, establecer -ms-user-select en "element" les facilita seleccionar solamente el contenido del artículo sin tener que preocuparse de colocar el cursor exactamente de la forma correcta. Esto es especialmente cierto para los usuarios que navegan de forma táctil.

Puedes desactivar la selección de texto en cualquier elemento de la página estableciendo -ms-user-select en "none". El usuario no podrá iniciar una selección dentro del bloque de texto especificado. Sin embargo, si el usuario empezó a seleccionar texto en un área distinta de la página, la selección puede continuar por cualquier área de la página, incluidas las áreas donde -ms-user-select está establecido en "none".

Implementación de ejemplo

La Versión de prueba de IE incluye una demostración práctica del funcionamiento de la propiedad -ms-user-select. La demostración presenta un prototipo de entrada de blog con varias áreas diferenciadas con contenido de texto: el blog en conjunto ("#blog"), que comprende la entrada de blog ("#blogPost") y varios comentarios (".comment"). Cada área, a su vez, está compuesta de varios tipos de elementos de textos, incluidos elementos input y textarea y elementos con la propiedad contenteditable establecida en "true".

Captura de pantalla de la demostración de user-select en la versión de prueba de IE

El menú emergente en la parte izquierda de la página tiene varias opciones para configurar -ms-user-select en los elementos de página. Veamos rápidamente las opciones enumeradas en el menú emergente dentro de la demostración.

Selección normal

Esta opción indica que -ms-user-select no se ha establecido en ningún elemento de la página. Los usuarios son libres para seleccionar texto en cualquier elemento que deseen.

Desactivar selección excepto en contenido editable

Esta opción establece -ms-user-select en "none" para todo el blog. Esto significa que no se puede seleccionar nada, excepto texto de regiones editables, como los campos "Nombre" y "Comentario".


#blog { 
  -ms-user-select:none;
} 

Desactivar selección en todas partes

Esta opción establece -ms-user-select en "none" para todo, esta vez incluidos los campos de entrada del usuario (elementos input y textarea), y cualquier otro elemento con la propiedad contenteditable establecida en true. Esto significa que no se puede seleccionar nada, incluido el texto con regiones editables.


#blog, #blog input, #blog textarea, #blog *[contenteditable=true] { 
  -ms-user-select:none;
}

Seleccionar solo contenido de entrada de blog

Esta opción establece -ms-user-select en "element" para los elementos con un ID de "blogPost", mientras que establece -ms-user-select en "none" para todo el blog. Esto significa que solo se puede seleccionar el texto de entrada de blog.


#blogPost {
  -ms-user-select:element;
} 

#blog { 
  -ms-user-select:none;
}

Seleccionar solo comentarios

Esta opción establece -ms-user-select en "element" para todos los elementos con una clase "comment", mientras que establece -ms-user-select en "none" para todo el blog. Esto significa que solo se puede seleccionar el texto de comentarios.


.comment {
  -ms-user-select:element;
} 

#blog { 
  -ms-user-select:none;
}

La selección comienza en la entrada de blog o comentarios pero se puede extender

Esta opción establece -ms-user-select en "text" para todos los elementos con un ID de "blogPost" o una clase de "comment", mientras que establece -ms-user-select en "none" para todo el blog. Esto significa que la selección de texto solo puede comenzar dentro de la entrada de blog o de los comentarios, pero se puede extender fuera de cualquiera de esas dos áreas. Sin embargo, la selección no puede comenzar fuera de la entrada de blog o de los comentarios.


#blogPost, .comment { 
  -ms-user-select:text;
} 

#blog { 
  -ms-user-select:none;
}

Compatibilidad en otros exploradores

En el momento de escribir estas líneas, tanto Mozilla como WebKit admiten sus propias versiones prefijadas de la propiedad user-select. Sin embargo, existen varias diferencias en sus implementaciones. Para obtener la información más actualizada, consulta cualquiera de los siguientes vínculos:

Temas relacionados

Demostración de la versión de prueba de IE: user-select
Tutoriales y muestras de Internet Explorer 10

 

 

Mostrar:
© 2014 Microsoft