it-swarm-eu.dev

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

Ich erstelle eine HTML-Benutzeroberfläche mit einigen Textelementen, z. B. Registerkartennamen, die bei Auswahl schlecht aussehen. Leider ist es für einen Benutzer sehr einfach, auf einen Registerkartennamen zu doppelklicken, der in vielen Browsern standardmäßig ausgewählt ist.

Möglicherweise kann ich das mit einem JavaScript-Trick lösen (diese Antworten möchte ich auch sehen) - aber ich hoffe wirklich, dass CSS/HTML direkt in allen Browsern funktioniert.

136
Tyler

In den meisten Browsern kann dies mit 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 verwenden, das Sie nicht auswählen möchten. Sie können dies mithilfe eines Attributs in HTML festlegen:

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

Leider wird diese Eigenschaft nicht vererbt, was bedeutet, dass Sie ein Attribut in das Start-Tag jedes Elements innerhalb von <div> Einfügen müssen. Wenn dies ein Problem ist, können Sie stattdessen JavaScript verwenden, um dies rekursiv für die Nachkommen eines Elements 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"));
187
Tim Down
<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 anscheinend von http://www.dynamicdrive.com

41
dimarzionist

Alle korrekten 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;
32
Blowsie

Versuche dies:

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

Einfach, aber effektiv ... funktioniert in aktuellen Versionen aller gängigen Browser.

13
Stephen M. Redd

Für Firefox können Sie die CSS-Deklaration "-moz-user-select" auf "none" anwenden. Lesen Sie die Dokumentation Benutzerauswahl.

Es ist eine "Vorschau" der Zukunft, "Benutzerauswahl", wie sie sagen, also werden vielleicht Opera oder WebKit - basierte Browser dies unterstützen. Ich erinnere mich auch, etwas für den Internet Explorer gefunden zu haben, aber ich erinnere mich nicht, was :).

Auf jeden Fall sollten Sie nicht wirklich überschreiben, was Benutzer von einer Webseite erwarten, es sei denn, es handelt sich um eine spezielle Situation, in der die Textauswahl zu einem Fehler bei der dynamischen Funktionalität führt, und Sie können jeden gewünschten Text auswählen.

11
Jorge Alves

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

::selection {
    background-color: transparent;
}

Es hat sich um die meisten Probleme gekümmert, die ich mit einigen ThemeRoller ul -Elementen in einer AIR-Anwendung (WebKit-Engine) hatte. Es wird immer noch ein kleiner (ca. 15 x 15) Teil des Nichts ausgewählt, aber die Hälfte der Seite wurde zuvor ausgewählt.

8
jlleblanc

Positionieren Sie Divs mit einem höheren Z-Index absolut über dem Textbereich und geben Sie diesen Divs ein transparentes GIF Hintergrundgrafik.

Beachten Sie nach ein wenig Überlegung, dass Sie diese 'Cover' verknüpfen müssen, damit Sie durch Klicken auf diese zu der Stelle gelangen, an der die Registerkarte sein soll. Dies bedeutet, dass Sie dies mit dem Ankerelement tun können/sollten, das auf display:box gesetzt ist. Breite und Höhe eingestellt sowie das transparente Hintergrundbild.

6
Dave Rutledge

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

4
Alan Hensel

Ein Beispiel dafür, warum es möglicherweise wünschenswert ist, die Auswahl zu unterdrücken, finden Sie unter SIMILE TImeline , bei dem die Zeitachse per Drag & Drop durchsucht wird. Während dieser versehentlichen vertikalen Mausbewegung werden die Beschriftungen unerwartet hervorgehoben. das sieht komisch aus.

4
pdc

Hier ist ein Sass Mixin (scss) für Interessierte. Compass /CSS 3 scheint kein benutzerdefiniertes 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 dies auf eine robustere Weise tun würde, d. H. Nur die von Ihnen ausgewählten Anbieter unterstützen würde.

3
rgb

"Wenn Ihre Inhalte wirklich interessant sind, können Sie letztendlich wenig tun, um sie zu schützen."

Das stimmt, aber das meiste Kopieren hat meiner Erfahrung nach nichts mit "letztendlich" oder Geeks oder entschlossenen Plagiatoren oder so etwas zu tun. Normalerweise kopieren ahnungslose Leute in ungezwungener Atmosphäre, und selbst ein einfacher, leicht zu besiegender Schutz (der leicht von Leuten wie uns besiegt werden kann) kann sie recht gut aufhalten. Sie wissen nichts über "Quelltext anzeigen" oder Caches oder etwas anderes ... zum Teufel, sie wissen nicht einmal, was ein Webbrowser ist oder was sie verwenden.

3
Big Bill

Wenn es schlecht aussieht, können Sie mit CSS das Erscheinungsbild ausgewählter Abschnitte ändern.

1
Wedge

Bilder können auch ausgewählt werden.

Die Verwendung von JavaScript zum Deaktivieren von Text ist begrenzt, da dies möglicherweise auch an Stellen der Fall ist, an denen Sie Text auswählen möchten. Um eine erfolgreiche Karriere zu gewährleisten, meiden Sie alle Anforderungen, die es erfordern, den Browser über das Übliche hinaus zu beeinflussen oder zu verwalten.

1
Kinjal Dixit

Jede JavaScript- oder CSS-Methode kann mit Firebug leicht umgangen werden (wie bei Flickr).

Du kannst den ... benutzen ::selection Pseudo-Element in CSS, um die Hervorhebungsfarbe zu ändern.

Wenn es sich bei den Registerkarten um Links handelt und das gepunktetes Rechteck im aktiven Zustand von Belang ist, können Sie dies auch entfernen (Benutzerfreundlichkeit beachten).

1
Taylor Edmiston

Es gibt viele Gelegenheiten, in denen das Deaktivieren der Auswahl die Benutzerfreundlichkeit verbessert.

Zum Beispiel dem Benutzer erlauben, einen Textblock auf der Seite zu kopieren, ohne den Text von Oberflächenelementen zu kopieren, die damit verbunden sind (die sich innerhalb des zu kopierenden Texts verteilen würden).

1
kbcom

Das Folgende funktioniert in Firefox interessanterweise, wenn ich die Schreibzeile entferne, 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>
0
hbtdev