Prevenir lo más destacado de la tabla de texto

Question

Tengo una tabla, y les permito a los usuarios 'seleccionar' varias filas. Todo esto se maneja usando eventos jQuery y algunos CSS para indicar visualmente que la fila está 'seleccionada'. Cuando el usuario presiona shift, es posible seleccionar varias filas. A veces, esto hace que el texto se resalte. ¿Hay alguna forma de prevenir esto?

Answer 1

Hay una propiedad de CSS3 para eso.

#yourTable { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

Answer 2

Puede probar con la función de enfoque() en el texto seleccionado - la selección desaparece.

$('#someEl').focus(); 

Answer 3

Si usted quiere tener el control cuando los usuarios pueden seleccionar o no partes de su sitio, se puede utilizar este little jQuery plugin.

jQuery.fn.extend({ 
     disableSelection : function() { 
       return this.each(function() { 
         this.onselectstart = function() { return false; }; 
         this.unselectable = "on"; 
         jQuery(this).css('user-select', 'none'); 
         jQuery(this).css('-o-user-select', 'none'); 
         jQuery(this).css('-moz-user-select', 'none'); 
         jQuery(this).css('-khtml-user-select', 'none'); 
         jQuery(this).css('-webkit-user-select', 'none'); 
       }); 
     } 
}); 

y utilizarlo como:

// disable selection on #theDiv object 
$('#theDiv').disableSelection(); 

De lo contrario, sólo puede utilizar estos atributos de CSS dentro de su archivo css como:

#theDiv 
{ 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

Answer 4

Simplemente elimino la selección que se realiza con la tecla Mayús. Esto podría mostrar un poco de parpadeo aunque

if (event.shiftKey) { 
    window.getSelection().removeAllRanges() 
} 

Answer 5

Sólo una nota en la respuesta de Cleiton arriba - el ejemplo de código parece funcionar bien, pero con el fin de ser un buen ciudadano en el mundo jQuery, debe devolver el jQuery objeto al final de la función para que sea chainable - una simple adición de una línea fija que hasta:

jQuery.fn.extend({ 
    disableSelection : function() { 
      this.each(function() { 
        this.onselectstart = function() { return false; }; 
        this.unselectable = "on"; 
        jQuery(this).css('-moz-user-select', 'none'); 
      }); 
      return this; 
    } 
}); 

Saludos, espero que esto es útil.

Answer 6

Si tiene jQuery UI en sus páginas, sólo tiene que utilizar

$("element-selector").disableSelection(); 

Answer 7

::-moz-selection { /* Code for Firefox */ 
    color: black; 
    background: none; 
} 

::selection { 
    color: black; 
    background: none; 
} 

de http://www.w3schools.com/cssref/sel_selection.asp
en realidad de la sección de try-que, después de cambiar los valores.
note que el cursor todavía tiene forma de 'I' ...