So markieren Sie Text automatisch beim Klicken auf den Benutzer

Einige Inhalte auf Websites sollen von den Benutzern kopiert werden, z. B. eine URL-Adresse, ein automatisch generierter API-Schlüssel oder ein paar Zeilen Code (Snippets). Das Kopieren dieser Inhalte könnte jedoch eine Herausforderung darstellen, insbesondere für Benutzer, die ein Trackpad oder eine beschissene Maus verwenden. Also machen wir es ihnen leichter.

Wenn Sie auf Websites wie TheNextWeb gestoßen sind, werden Sie feststellen, dass die Kurzlink-URL hervorgehoben wird, wenn Sie darauf klicken. Schauen wir uns an, wie das gemacht wird.

Anfangen

Zunächst legen wir den HTML-Code fest, der die Kurzlink-URL umschließt.

 Kurzlink 
 http://goo.gl/9JEpOz 

Wir haben die URL in ein span Element und ein Icon von Ionicon eingeschlossen. Der Stil dieser Elemente liegt ganz bei Ihnen, da dies von Ihrem Website-Layout abhängt. Aber für die Zwecke dieser Demo style ich es so:

Es ist einfach, blau und quadratisch (greifen Sie hier auf die Stilcodes).

Das JavaScript

Und hier ist das Fleisch des Codes, das JavaScript. Der Plan hier ist, die URL hervorzuheben, wenn die Benutzer darauf klicken .

Wir beginnen den Code mit einer Variablen, die das Element auswählt, auf das der Benutzer klicken wird.

 var target = document.querySelector ('. shortlink'); 

Der querySelector ist eine JavaScript-Methode zum Auswählen des Elements. Es funktioniert im Grunde wie der jQuery-Konstruktor $() . Sie können die Punktnotation verwenden, um das Element durch die Klasse oder die Notation zu erhalten, um ein Element nach der ID zu erhalten.

Als nächstes müssen wir eine neue JavaScript-Funktion erstellen.

 Funktionsauswahl (elem) {} 

Wir benennen unsere Funktion als selection() . Und wie Sie oben sehen können, benötigt die Funktion einen Parameter, um das Element zu übergeben, das die URL umschließt, oder einen normalen Text, den wir hervorheben möchten. In unserem Fall wäre dies das span Element mit der Klasse shortlink__url .

Innerhalb dieser Funktion fügen wir ein paar weitere Variablen hinzu:

 var target = document.querySelector ('. shortlink'); Funktionsauswahl (elem) {var elem = document.querySelector (elem); var Auswahl = window.getSelection (); var range = document.createRange (); } 

Zuerst wählt die elem Variable das Element aus, das wir durch den Parameter der Funktion passieren. Die zweite Variable, select, führt eine native JavaScript-Funktion aus, um die Textauswahl zu erhalten. Die letzte Variable, range steuert den Auswahlbereich; Wir möchten sicherstellen, dass die Auswahl nur innerhalb des ausgewählten Elements erfolgt.

Als nächstes verketten wir diese Variablen mit ein paar anderen JavaScript-Funktionen wie folgt:

 var target = document.querySelector ('. shortlink'); Funktionsauswahl (elem) {var elem = document.querySelector (elem); var Auswahl = window.getSelection (); var range = document.createRange (); range.selectNodeContents (elem); select.addRange (Bereich); } 

Der erste Zusatz, range.selectNodeContents(elem), definiert den Bereich der Auswahl, der in diesem Fall das Element ist, auf das im Element Bezug elem . Die letzte Zeile, select.addRange(range) beschränkt die Auswahl auf den angegebenen Bereich.

Groß! Wir sind alle mit der Funktion eingestellt. Lassen Sie uns es in die Tat umsetzen.

Starte es

Wir binden das onclick mit einem onclick Ereignis. Wenn auf das Element geklickt wird, führen wir die soeben erstellte Funktion aus und übergeben den Parameter mit dem Klassennamen des Elements, in dem die URL eingeschlossen ist. In diesem Fall ist es .shortlink__url .

 target.onclick = function () {Auswahl ('. shortlink__url'); }; 

Wir sind fertig. Wie bereits erwähnt, können Sie dies auch für andere Arten von Inhalten auf Ihrer Website tun, die Ihre Benutzer möglicherweise einfacher kopieren möchten.

Einige von Ihnen fragen sich vielleicht, ob wir den Shorturl beim Klicken auf den Benutzer automatisch kopieren und nicht nur markieren können. Obwohl dies eine wirklich gute Idee zu sein scheint, ist es leider nicht ganz einfach zu erreichen und kann eine schlechte Benutzererfahrung verursachen. Die Kopieraktion sollte vollständig vom Benutzer genehmigt werden.

Die Schritte in diesem Beitrag nehmen nur die Highlight Aktion auf. Ob unsere Benutzer es kopieren oder nicht, liegt ganz bei ihnen.

Sie können die folgenden Links folgen, um die Demo zu sehen oder den Quellcode herunterzuladen.

• Demo anzeigen
• Quelle herunterladen