¿Cómo puedo hacer que ciertas partes de mi html no sean seleccionables?

¿Cómo puedo hacer que ciertas partes de mi html no se puedan seleccionar?¿Cómo puedo hacer que ciertas partes de mi html no sean seleccionables?

Tengo algunos divs completamente posicionados que siguen siendo seleccionados si un usuario intenta seleccionar el contenido de mi página.

¿Hay alguna manera de hacerlo para que ciertos elementos (como los divs) no sean seleccionables?

EDITAR: El problema principal es cuando alguien copia estos div absolutos y luego los pega en el editor de texto enriquecido en mi sitio, el editor de texto enriquecido se rompe en IE.

Fuente

2010-11-30 Kyle

pregunta posiblemente relacionados: http: // stackoverflow.com/questions/924916/is-there-a-way-to-make-a-div-unselectable –

La solución jQuery que se sugiere a continuación parece prometedora, si no le funciona, no debería ser complicado construir algo con JavaScript puro también, háznoslo saber. :) –

Si desea simplemente ocultar rectángulo de selección, puede utilizar

element::selection { background: transparent }

y su homólogo de Gecko

element::-moz-selection { background: transparent }

Si desea ayudar a los usuarios seleccionar el texto derecho a copiar al portapapeles, puedes alejar el elemento. Por lo general, los navegadores conservan el orden de los elementos tal como están definidos en HTML al seleccionarlos. Si bien no es la solución perfecta, puede colocar el código del elemento en HTML al principio o al final de la etiqueta <body>. De esta forma, si el usuario selecciona algo en el medio de la página, el elemento estará demasiado "muy lejos" para interferir.

Fuente

2010-11-30 02:08:20 Athari

+1 - Sí, deseo ayudarlos a seleccionar el texto correcto para copiar. Buena sugerencia acerca de poner los divs abs demasiado lejos para ser seleccionado. – Kyle

+1 @Athari: esta es la solución correcta. Como sus 'div's están en posición absoluta, puede reordenar dónde aparecen dentro del HTML. Esto ayudaría a los usuarios a seleccionar el texto correcto. De hecho, te felicito @Kyle por tomar esto en consideración, ya que me molesta mucho cuando selecciono '' '' '' aleatorios cuando intento seleccionar las selecciones. – bguiz

Puede utilizar el pseudo-elemento ::selection para hacer la selección de un determinado elemento "invisible":

p::selection { background-color:transparent; } 
p::-moz-selection { background-color:transparent; }

Sin embargo, que no funciona en IE.

Fuente

2010-11-30 02:02:01

pero lo apoyarán en IE9! –

Para IE, agregue el atributo unselectable="ON". (EDIT: Aunque no será completamente útil)

Para Gecko, agregue el estilo CSS -moz-user-select: none.

Para WebKit, agregue el estilo CSS -webkit-user-select: none.

Fuente

2010-11-30 02:04:53 SLaks

Intentó 'unselectable =" ON "' y no funcionó. La lectura de MSDN dice: 'Un elemento con el atributo UNSELECTABLE establecido en on se puede incluir en una selección que comienza en algún lugar fuera del elemento. Por lo tanto, se selecciona involuntariamente cuando intentan copiar el área de contenido. – Kyle

+1 ¡Genial! Y el atributo no seleccionable también funciona en Opera. –

¿Por qué se bajó este valor? – SLaks

este artículo podría ayudar con una solución multi-navegador: (utiliza jQuery) http://aleembawany.com/2009/01/20/disable-selction-on-menu-items-with-this-jquery-extension/

en teoría, se puede ampliar el núcleo de jQuery que utiliza este:

jQuery.fn.extend({ 
    disableSelection : function() { 
      return this.each(function() { 
        this.onselectstart = function() { return false; }; 
        this.unselectable = "on"; 
        jQuery(this).addClass('unselectable'); 
      }); 
    } 
});

y aplicando de esta manera:

// disable selection on selected objects 
$('.myClass').disableSelection();

debe asegurarse de que tiene esto en su hoja de estilos:

.unselectable { 
    user-select: none; 
    -o-user-select: none; 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
}

parece que básicamente hace lo que han mencionado SLaks y Sime. no he probado, pero me interesaría saber si funciona

Fuente

2010-11-30 02:12:50

@Sebastian Al conservar las diversas propiedades seleccionadas por el usuario, sería más eficiente definir una clase: '.unselectable {user-select: none; -moz-user-select: none; ...} 'y luego simplemente escribir:' $ (this) .addClass ("unselectable") '. –

@Sime pero ¿qué tal IE? Supongo que 'this.unselectable =" on ";' se ocupa del explorador. de lo contrario, tienes toda la razón. –

@Sebastian Esa línea para IE está bien. Pero esas 5 líneas con los métodos css() deberían reemplazarse con addClass() como dije. –

jQuery Solución:

$(".unselectable").disableSelection();

Fuente

2010-11-30 08:26:04

¿Cómo puedo hacer que ciertas partes de mi html no sean seleccionables?

Respuesta

Cuestiones relacionadas