So markieren Sie den Text beim Klicken auf den Benutzer automatisch

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

Wenn Sie auf Websites wie TheNextWeb gestoßen sind, werden Sie feststellen, dass die Shortlink-URL hervorgehoben wird, wenn Sie darauf klicken. Lassen Sie uns herausfinden, wie das gemacht wird.

Fertig machen

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

 
 Kurzlink 
  http://goo.gl/9JEpOz 
 
 

Wir haben die URL in ein Spanne Element zusammen mit einem Symbol von Ionicon. Der Stil dieser Elemente liegt ganz bei Ihnen, da sie vom Layout Ihrer Website abhängen. Im Sinne dieser Demo stelle ich sie jedoch so vor:

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

Das JavaScript

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

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

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

Das querySelector ist eine JavaScript-Methode, um das Element auszuwählen. es funktioniert im Grunde wie der jQuery-Konstruktor $ (). Sie können die Punktnotation verwenden, um das Element von der Klasse oder abzurufen # Notation, um ein Element anhand der ID abzurufen.

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

 Funktionsauswahl (elem)  

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

Innerhalb dieser Funktion fügen wir einige weitere Variablen hinzu:

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

Zuerst die elem Variable wählt das Element aus, das wir durch den Parameter der Funktion übergeben. Die zweite Variable, wählen, führt eine native JavaScript-Funktion aus, um die Textauswahl zu erhalten. Die letzte Variable, Angebot 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 einigen anderen JavaScript-Funktionen wie folgt:

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

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

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

Starte es

Wir binden das Zielelement mit einem onclick Veranstaltung. Wenn Sie auf das Element klicken, führen wir die soeben erstellte Funktion aus und übergeben den Parameter mit dem Klassennamen des Elements, in das die URL eingefügt wird. in diesem Fall ist es .shortlink__url.

 target.onclick = function () selection ('. 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 von Ihren Benutzern möglicherweise einfacher kopiert werden sollen.

Einige von Ihnen fragen sich vielleicht, ob wir das automatisch könnten Kopieren, Anstatt nur die Kurzbezeichnung hervorzuheben, klicken Sie auf den Benutzer. Dies mag zwar eine wirklich gute Idee sein, ist aber leider nicht ganz leicht zu erreichen und kann zu einer schlechten Benutzererfahrung führen. Die Kopieraktion sollte vollständig der Zustimmung des Benutzers unterliegen.

Die Schritte in diesem Beitrag beziehen sich nur auf die Hervorhebungsaktion. Ob unsere Benutzer es kopieren oder nicht, liegt ganz bei ihnen.

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

• Demo anzeigen
• Quelle herunterladen