Textblock-Auswahl erzwingen

Haben Sie schon einmal (oder sich selbst) Text in ein <textarea> oder <input> Feld gesetzt, nicht weil es Teil eines Formulars war, sondern weil es die Auswahl eines ganzen Textblocks erleichterte. Eingabefelder wie diese haben AuswahlGrenzen, was bedeutet, dass Sie hineinklicken und zum Beispiel Alles auswählen können, um nur den Text innerhalb des Eingabefelds zu erhalten.

Es gibt eine CSS-Eigenschaft, mit der wir dies erreichen können, ohne ein nicht besonders semantisch passendes Formulareingabefeld verwenden zu müssen.

Es ist die Eigenschaft user-select, und sie funktioniert so

.force-select-all {
  user-select: all;
}

Autoprefixer erledigt das für Sie, aber wenn Sie es manuell machen, benötigen Sie dies für die beste Browserunterstützung

.force-select-all {
  -webkit-user-select: all; /* Covers Blink-land & Firefox (yup) */
  user-select: all; /* Someday */
}

Ein Beispiel, fragen Sie?

Ich finde den häufigsten Anwendungsfall für diese Art von Sache ist: „Hier ist ein serverseitig generierter, kopierbarer Einbettungscode für unser Ding™“. Stellen Sie sich den Einbettungscode für YouTube- oder Vimeo-Videos vor

Macht Sinn auf einer Seite wie meinem alten HTML-Ipsum, das dringend ein Update benötigt.

Eine Demo

Wie wäre es mit einem etwas anderen Anwendungsfall, einer Cheat Sheet, die einige einfache Code-Schnipsel enthält, die kopiert werden sollen

Siehe den Pen SVG Shape Cheatsheet (user-select: all; demo) von Chris Coyier (@chriscoyier) auf CodePen.

Mehr zum Thema Präfixe

Eigentlich gibt Ihnen Autoprefixer

.force-select-all {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

Was verständlich ist, weil

1. Es ist seltsam, nur -webkit- für Firefox zu verwenden, obwohl es es akzeptiert
2. Edge unterstützt all nicht, aber es unterstützt none mit einem Präfix, daher präfigiert es die Eigenschaft immer

Nehmen wir an, Sie mögen die erzwungene Auswahl nicht, aber die Auswahlgrenzen schon.

Darum geht es beim Wert contain. Er lässt die Textauswahl so verhalten, als ob sie innerhalb eines Eingabefelds stattfinden würde

.select-text-like-you-would-within-a-textarea {
  /* Not supported anywhere yet */
  user-select: contain;
}

Leider noch keine Unterstützung. IE/Edge unterstützt jedoch eine proprietäre Version

.ie-version-of-contain {
  -ms-user-select: element;
}

Jetzt haben wir also none, all und contain. Es gibt auch text, das den Text wie „normalen“ Text auswählbar macht.

Wenn Sie den Wert jemals zurücksetzen müssen, sollten Sie auto verwenden, da dies der Wert ist, der das Element in seinen normalen Zustand zurückversetzt (z. B. würde ein <p> zu Text zurückkehren, ein <textarea> zu contain).

Ausgewählten Text stylen

Da wir hier über die Textauswahl sprechen, denken Sie daran, dass Sie ausgewählten Text stylen können

::-moz-selection { background: yellow; }
::selection { background: yellow; }

Obwohl… ich könnte empfehlen, diese nicht zu kombinieren, da das automatische Textauswahlverhalten bereits ein *wenig seltsam* ist, so dass dies in Kombination mit einem völlig anderen Auswahlstil verwirrend sein könnte, bis zu dem Punkt, an dem eine Person nicht versteht, was passiert.

Oder zumindest die ::selection seitenweit anwenden, nicht spezifisch für isolierte Bereiche.

Der klassische JavaScript-Weg

Keine Edge-Unterstützung könnte ein Dealbreaker für Sie sein. Wenn die automatische Textauswahl geschäftskritisch ist, sollten Sie sich einfach an ein Eingabefeld und JavaScript halten.

Super einfaches Beispiel

Siehe den Pen Simplest Select von Chris Coyier (@chriscoyier) auf CodePen.

Ich bin sicher, Sie könnten viel ausgefallener werden, z. B. indem Sie Inline-Event-Handler vermeiden und „Okay, ich habe hineingeklickt und Sie haben Ihren Text ausgewählt, ich verstehe, jetzt hören Sie damit auf, damit ich nur einen Teil von Ihnen auswählen kann“ berücksichtigen – was sicherlich möglich ist.

Pseudo-Elemente

Ob zum Guten oder Schlechten, user-select: text; könnte eine Möglichkeit sein, Pseudo-Elemente (wie ::before oder ::after) auswählbar zu machen, was sie derzeit in keinem Browser sind. Es ist wahrscheinlich gut, dass man sie nicht auswählen kann, da Pseudo-Elemente auch nicht für AT gelesen werden sollen (da sie kein „Inhalt“ sind). Aber es ist schon seltsam, Text auf einem Bildschirm zu sehen, den man nicht auswählen kann, daher würde ich nicht überrascht sein, in welche Richtung auch immer die Browser sich entscheiden.

Mobil

Für iOS gibt es noch etwas anderes, das Sie vielleicht verwenden möchten

.prevent-touch-callout {
  -webkit-touch-callout: none;
}

Nicht speziell über die Auswahl, aber wenn Sie die Textauswahl verhindern, verhindern Sie wahrscheinlich auch die Interaktion im Allgemeinen. MDN

Wenn ein Ziel auf iPhone OS berührt und gehalten wird, zeigt Safari ein Informations-Callout über den Link an. Diese Eigenschaft erlaubt es, dieses Verhalten zu deaktivieren.

Kopieren erzwingen?

Da wir über die erzwungene Textauswahl sprechen, können wir auch das Kopieren in die Zwischenablage erzwingen? Das geht tatsächlich. Früher gab es eine Flash-basierte Methode dafür, aber wie wir alle wissen, ist Flash ziemlich tot. Chrome hat gerade einen weiteren Todesstoß angekündigt. IE 10 unterstützte dieses execCommand Ding, und wie es sich herausstellt, scheint das die Sache zu sein, auf die sich die Browser einigen. Ich habe diese Demo aus dem Google-Artikel von Matt Gaunt geschnappt

Siehe den Pen Copy Text with a Button (Google Example) von Chris Coyier (@chriscoyier) auf CodePen.

Sieht so aus, als funktioniert das in Blink-Land, Firefox und Edge, also… cool.

Weitere Informationen

• user-select auf MDN – mehr Details hier zu Präfixen und proprietären Werten.
• Can I Use zur Unterstützung – speziell für den none-Wert
• Aktuelle Version des Standards – soweit ich das beurteilen kann
• Dokument von Google mit einigen interessanten Details zur Unterstützung und Links zu relevanten Bugs.

Puh

Das waren viele Worte für eine so einfache Sache. Gute Arbeit, Team.