Gibt es eine Möglichkeit, Text unselectable auf einer HTML-Seite zu machen? [Duplikat]

StackOverflow https://stackoverflow.com/questions/69430

Frage

    

Diese Frage bereits eine Antwort hier:

    
            
  •              Wie Textauswahl Hervorhebung deaktivieren?                                      40 Antworten                          
    •     
    

Ich baue einen HTML-UI mit einigen Textelementen, wie zum Beispiel Register Namen, die schlecht aussehen, wenn sie ausgewählt. Leider ist es sehr einfach für einen Benutzer eine Registerkarte Namen doppelklicken, die in vielen Browsern standardmäßig ausgewählt wird.

Ich könnte in der Lage sein, dies mit einem JavaScript-Trick zu lösen (ich mag diese Antworten sehen, auch) - aber ich hoffe wirklich, es ist etwas in CSS / HTML-Code direkt, die in allen Browsern funktionieren

War es hilfreich?

Lösung

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

*.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 einstellen, das ein Attribut in HTML mit: 

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

Leider ist diese Eigenschaft nicht vererbt, das heißt, Sie haben in der <div> ein Attribut in dem Start-Tag jedes Element zu setzen. 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"));

Andere Tipps

<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>

Bearbeiten

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

Alle die 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;

Versuchen Sie folgendes: 

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

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

Für Firefox können Sie die CSS-Deklaration "-moz-user-select" auf "none" gelten. Überprüfen Sie ihre Dokumentation aus, Benutzer wählen .

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

Wie auch immer, es sei denn, es ist eine bestimmte Situation, in der Text-Auswahl scheitern einige dynamische Funktionalität macht, sollten Sie nicht wirklich außer Kraft setzen, was die Nutzer von einer Webseite erwarten, und dass jeder Text auszuwählen ist in der Lage, sie wollen.

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

::selection {
    background-color: transparent;
}

Es kümmerte sich um die meisten der Fragen, die ich mit einigen Themeroller ul Elemente in einer AIR-Anwendung (WebKit-Engine), die wurde. Noch einen kleinen bekommen (ca.. 15 x 15) Flecke des Nichts, das ausgewählt wird, aber die Hälfte der Seite, bevor ausgewählt wurde.

Absolut Position divs über den Textbereich mit einem z-Index höher und geben diese divs einen transparenten GIF Hintergrund-Grafik.

Hinweis nach einem bisschen mehr Gedanken - Sie müssen diese ‚Abdeckungen‘ verknüpft werden, haben, so dass Sie auf sie möchten Sie, wo die Reiter nehmen an sollte, das heißt, Sie könnten / sollten dies tun, mit dem Ankerelement Set bis display:box, Breite und Höhe sowie die transparente Hintergrundbild eingestellt.

Für ein Beispiel, warum es wünschenswert sein könnte, die Auswahl zu unterdrücken, finden Sie unter SIMILE Zeitachse, die nutzt Drag-and-Drop die Timeline zu erkunden, in denen zufällige vertikale Mausbewegung der Etiketten verursacht unerwartet hervorgehoben werden, was seltsam aussieht.

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

  

"Wenn Sie Ihre Inhalte wirklich interessant ist, dann gibt es wenig, was Sie können   schließlich machen sie zu schützen "

Das ist wahr, aber die meisten Kopieren, in meiner Erfahrung, hat nichts mit „letztlich“ oder Geeks oder bestimmten Plagiatoren oder so etwas zu tun. Es ist in der Regel beiläufig Kopieren von ahnungslosen Menschen, und sogar ein einfacher, leicht zu besiegen Schutz (leicht von Leuten wie wir besiegt, das ist) funktioniert ganz gut, sie zu stoppen. Sie wissen nichts über „Quelltext anzeigen“ oder Caches oder irgendetwas anderes ... Heck, sie wissen nicht einmal, was ein Web-Browser ist oder dass sie verwenden ein.

Hier ist ein Sass mixin (SCSS) für die Interessenten. Compass / CSS 3 scheint nicht zu einem user-select mixin 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 in einer robusteren Art und Weise tun würde, fügen Sie das heißt nur Unterstützung für Anbieter Sie gewählt haben.

Wenn es schlecht aussieht, wie Sie CSS verwenden können, um das Aussehen ausgewählter Abschnitte zu ändern.

Nicht verbunden mit StackOverflow
scroll top