Empêcher la surbrillance du tableau de texte

Question

J'ai une table et je permets aux utilisateurs de sélectionner plusieurs lignes. Tout cela est géré à l'aide d'événements jQuery et de CSS pour indiquer visuellement que la ligne est 'sélectionnée'. Lorsque l'utilisateur appuie sur Maj, il est possible de sélectionner plusieurs lignes. Parfois, le texte est mis en surbrillance. Est-il un moyen d'empêcher cela?

Answer 1

Il y a une propriété CSS3 pour cela.

#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

Vous pouvez essayer avec la fonction focus() sur le texte sélectionné - la sélection disparaît.

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

Answer 3

Si vous voulez avoir le contrôle lorsque vos utilisateurs peuvent choisir ou non partie de votre site, vous pouvez utiliser ce 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'); 
       }); 
     } 
}); 

et l'utiliser comme:

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

Sinon, vous pouvez simplement utiliser ces css attributs dans votre fichier css:

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

Answer 4

Je supprime simplement la sélection effectuée à l'aide de la touche Maj. Cela pourrait montrer un peu scintillement si

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

Answer 5

Juste une note sur la réponse de Cleiton ci-dessus - l'exemple de code semble bien fonctionner, mais pour être un bon citoyen dans le monde jQuery, vous devez retourner le jQuery objet à la fin de la fonction afin qu'il soit chainable - simple ajout d'une ligne fixe que jusqu'à:

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, espérons que cela est utile.

Answer 6

Si vous avez Jquery UI sur vos pages, il suffit d'utiliser

$("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 fait de la section essayer-il, après avoir changé les valeurs.
Notez cependant que le curseur est toujours en forme de 'I' ...