Gibt es eine Möglichkeit, Text auf einer HTML-Seite nicht auswählbar zu machen?

Question

Ich baue eine HTML-Benutzeroberfläche mit einigen Textelementen wie Tab-Namen, die bei der Auswahl schlecht aussehen. Leider ist es für einen Benutzer sehr einfach, auf einen Tabnamen zu doppelklicken, der ihn standardmäßig in vielen Browsern auswählt.

Ich könnte das vielleicht mit einem JavaScript-Trick lösen (ich würde gerne diese Antworten auch sehen) - aber ich hoffe wirklich, dass es etwas in CSS/HTML direkt gibt, das über alle Browser funktioniert.

Answer 1

In den meisten Browsern kann dies erreicht werden mit Hilfe von CSS:

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

    /* 
    Introduced in IE 10. 
    See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ 
    */ 
    -ms-user-select: none; 
    user-select: none; 
} 

Für IE < 10 und Opera, müssen Sie das unselectable Attribut des Elements Sie unselectable sein verwenden möchten. Sie können diese Einstellung ein Attribut in HTML mit:

<div id="foo" unselectable="on" class="unselectable">...</div> 

Leider diese Eigenschaft nicht vererbt wird, was bedeutet, müssen Sie innerhalb der <div> ein Attribut in dem Start-Tag jedes Element gesetzt. Wenn dies ein Problem ist, könnten Sie stattdessen JavaScript verwenden, um dies für ein Element Nachkommen rekursiv zu tun:

function makeUnselectable(node) { 
    if (node.nodeType == 1) { 
     node.setAttribute("unselectable", "on"); 
    } 
    var child = node.firstChild; 
    while (child) { 
     makeUnselectable(child); 
     child = child.nextSibling; 
    } 
} 

makeUnselectable(document.getElementById("foo")); 

Answer 2

Absolut Position divs über den Textbereich mit einem z-Index höher und gibt diesen eine transparente divs GIF Hintergrundgrafik.

Hinweis nach ein bisschen mehr Gedanken - Sie müssten diese "Abdeckungen" verknüpft haben, so dass Sie dorthin, wo die Registerkarte sollte, bringen würde, was bedeutet, dass Sie dies mit dem Ankerelement tun könnten/sollten Stellen Sie display:box, Breite und Höhe sowie das transparente Hintergrundbild ein.

Answer 3

Bilder können auch ausgewählt werden.

Es gibt Grenzen mit Hilfe von JavaScript Text zu deaktivieren, da es auch dort passieren könnte, in dem Sie auswählen möchten. Um eine reichhaltige und erfolgreiche Karriere zu gewährleisten, sollten Sie sich von allen Anforderungen ablenken, die eine Beeinflussung oder Verwaltung des Browsers über das Gewöhnliche hinaus erfordern ... es sei denn, Sie zahlen Ihnen extrem gut.

Answer 4

Für Firefox können Sie die CSS-Deklaration "-moz-user-select" auf "none" anwenden. Überprüfen Sie ihre Dokumentation, user-select.

Es ist eine "Vorschau" der Zukunft "user-select", wie sie sagen, so vielleicht Opera oder WebKit-basierte Browser werden das unterstützen. Ich erinnere mich auch, etwas für das Internet zu finden   Explorer, aber ich erinnere mich nicht, was :).

Wie auch immer, es sei denn, es ist eine spezielle Situation, in der einige dynamische Funktionen durch die Textauswahl nicht funktionieren. Sie sollten nicht wirklich überschreiben, was Benutzer von einer Webseite erwarten.

Answer 5

<script type="text/javascript"> 

/*********************************************** 
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) 
* This notice MUST stay intact for legal use 
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code 

***********************************************/ 


function disableSelection(target){ 

    if (typeof target.onselectstart!="undefined") //IE route 
     target.onselectstart=function(){return false} 

    else if (typeof target.style.MozUserSelect!="undefined") //Firefox route 
     target.style.MozUserSelect="none" 

    else //All other route (ie: Opera) 
     target.onmousedown=function(){return false} 

    target.style.cursor = "default" 
} 



//Sample usages 
//disableSelection(document.body) //Disable text selection on entire body 
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv" 


</script> 

EDIT

-Code kommt offenbar aus http://www.dynamicdrive.com

Answer 6

Try this:

<div onselectstart="return false">some stuff</div> 

Einfach, aber effektiv ... arbeitet in aktuellen Versionen von allen gängigen Browsern.

Answer 7

Wenn es schlecht aussieht, können Sie CSS verwenden, um die Darstellung ausgewählter Abschnitte zu ändern.

Answer 8

Ein Beispiel dafür, warum es wünschenswert sein könnte, die Auswahl zu unterdrücken, finden Sie unter SIMILE TImeline. Mit Drag & Drop können Sie die Timeline durchsuchen, bei der zufällige vertikale Mausbewegungen die Beschriftungen unerwartet hervorheben.

Answer 9

Ich bin ein gewisses Maß an Erfolg mit dem CSS finden hier http://www.quirksmode.org/css/selection.html beschrieben:

::selection { 
    background-color: transparent; 
} 

Es kümmerte sich um die meisten der Fragen, die ich mit einigen Themeroller ul Elemente in einer AIR-Anwendung aufweist, wurde (WebKit-Engine) . Immer noch ein kleiner (ca. 15 x 15) Patch des Nichts, der ausgewählt wird, aber die Hälfte der Seite wurde zuvor ausgewählt.

Answer 10

Für Safari, -khtml-user-select: none, genau wie Mozillas -moz-user-select (oder in JavaScript, target.style.KhtmlUserSelect="none";).

Answer 11

Folgendes funktioniert in Firefox interessanterweise, wenn ich die Schreibleitung entfernen, funktioniert es nicht. Jeder hat einen Einblick, warum die Schreibleitung benötigt wird.

<script type="text/javascript"> 
document.write("."); 
document.body.style.MozUserSelect='none'; 
</script> 

Answer 12

Jede JavaScript- oder CSS-Methode wird mit Firebug (wie bei Flickr) problemlos umgangen.

Sie können in CSS die ::selection pseudo-element verwenden, um die Hervorhebungsfarbe zu ändern.

Wenn die Tabs Links sind und die dotted rectangle in active state von Interesse ist, können Sie das auch entfernen (natürlich die Benutzerfreundlichkeit in Betracht ziehen).

Answer 13

alle richtigen CSS Variationen sind:

-webkit-touch-callout: none; 
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 

Answer 14

„Wenn Ihr Inhalt ist wirklich interessant, dann gibt es wenig Sie können letztlich

„zu schützen, tun

das stimmt, aber die meisten Kopieren, in meiner Erfahrung, hat nichts zu mit "ultimativ" oder Geeks oder entschlossenen Plagiatoren oder so etwas tun. Es ist in der Regel gelegentliche Kopie von ahnungslosen Menschen, und sogar ein einfacher, leicht zu besiegen Schutz (leicht von Leuten wie uns, das ist besiegt) funktioniert ganz gut, um sie zu stoppen. Sie wissen nichts über "View Source" oder Caches oder irgendetwas anderes ... heck, sie wissen nicht einmal, was ein Webbrowser ist oder dass er einen benutzt.

Answer 15

Es gibt viele Situationen, in denen das Ausschalten der Auswahl die Benutzererfahrung verbessert.

Zum Beispiel ermöglicht es dem Benutzer, einen Textblock auf der Seite zu kopieren, ohne den Text der damit verbundenen Oberflächenelemente zu kopieren (die in dem zu kopierenden Text durchsetzt würden).

Answer 16

Hier ist ein Sass Mixin (SCSS) für Interessenten. Compass/CSS   3 scheint keine vom Benutzer ausgewählte Mischung zu haben.

// @usage use within a rule 
// ex. img {@include user-select(none);} 
// @param assumed valid user-select value 
@mixin user-select($value) 
{ 
    & { 
     -webkit-touch-callout: $value; 
     -webkit-user-select: $value; 
     -khtml-user-select: $value; 
     -moz-user-select: $value; 
     -ms-user-select: $value; 
     user-select: $value; 
    } 
} 

Obwohl Compass es auf eine robustere Weise tun würde, d. H. Nur Unterstützung für die von Ihnen ausgewählten Anbieter hinzufügen.