Evita l'evidenziazione del testo Tabella

Question

Ho una tabella e autorizzo gli utenti a 'selezionare' più righe. Tutto questo viene gestito usando eventi jQuery e alcuni CSS per indicare visivamente che la riga è 'selezionata'. Quando l'utente preme shift, è possibile selezionare più righe. A volte questo causa di evidenziare il testo. C'è comunque per impedirlo?

Answer 1

C'è una proprietà CSS3 per questo.

#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

Si può provare con la funzione focus() sul testo selezionato - la selezione scompare.

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

Answer 3

Se si desidera avere il controllo quando gli utenti possono selezionare o meno le parti del tuo sito, è possibile utilizzare questo 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'); 
       }); 
     } 
}); 

e usarlo come:

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

In caso contrario, si può semplicemente utilizzare questi attributi CSS all'interno del vostro file CSS come:

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

Answer 4

Ho semplicemente rimosso la selezione effettuata utilizzando il tasto Maiusc. Questo potrebbe mostrare un po 'di sfarfallio se

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

Answer 5

Solo una nota sulla risposta da Cleiton sopra - l'esempio di codice sembra funzionare bene, ma per essere un buon cittadino nel mondo jQuery, si dovrebbe restituire il jQuery oggetto al termine della funzione in modo che sia chainable - una semplice aggiunta di una riga fissa che fino:

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; 
    } 
}); 

Cheers, spero che questo è utile.

Answer 6

Se si dispone di jQuery UI sulle tue pagine, basta usare

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

Answer 7

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

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

da http://www.w3schools.com/cssref/sel_selection.asp
in realtà dalla sezione try-it, dopo aver cambiato i valori.
avviso che il cursore è ancora a forma di 'I' ...