Hervorhebung der Hervorhebung von Text verhindern Tabelle

Question

Ich habe eine Tabelle und erlaube Benutzern, mehrere Zeilen auszuwählen. Dies alles wird mithilfe von jQuery-Ereignissen und einigen CSS-Anweisungen behandelt, um visuell anzuzeigen, dass die Zeile "ausgewählt" ist. Wenn der Benutzer die Umschalttaste drückt, können mehrere Zeilen ausgewählt werden. Manchmal wird dadurch Text hervorgehoben. Gibt es das überhaupt, um das zu verhindern?

Answer 1

Es gibt eine CSS3-Eigenschaft dafür.

#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

Sie können versuchen, mit Fokus() Funktion auf den ausgewählten Text - die Auswahl verschwindet.

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

Answer 3

Wenn Sie die Kontrolle haben wollen, wenn die Benutzer auswählen können oder nicht Teile von Ihnen Website, können Sie diese little jQuery plugin verwenden.

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

und verwenden Sie es als:

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

Andernfalls können Sie nur diese CSS-Attribute in Ihrem CSS-Datei als:

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

Answer 4

Ich entferne einfach die Auswahl, die mit der Umschalttaste vorgenommen wird. Dies könnte ein wenig Flimmern zeigen obwohl

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

Answer 5

Nur ein Hinweis auf die Antwort von Cleiton oben - das Codebeispiel gut zu funktionieren scheint, aber um ein guter Bürger in der jQuery Welt zu sein, sollten Sie wieder die jQuery Objekt am Ende der Funktion, so dass es verkettbar - eine einfache einzeilige zusätzlich fixiert, dass bis:

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, hoffe, das ist hilfreich.

Answer 6

Wenn Sie JQuery UI auf Ihren Seiten haben, benutzen Sie einfach

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

Answer 7

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

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

von http://www.w3schools.com/cssref/sel_selection.asp
tatsächlich aus dem try-it Abschnitt, nachdem die Werte zu ändern.
Beachten Sie jedoch, dass der Cursor immer noch 'ich' geformt ist ...