de.hideout-lastation.com
Paradies Für Designer Und Entwickler


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

Ein Überblick über Designmodos Slides Framework

Ein Überblick über Designmodos Slides Framework

Zielseiten und Werbeseiten sind entscheidend für die Umwandlung von Besuchern in Nutzer oder Kunden. Ein hochwertiges Design kann der Schlüssel zur Verbesserung der Verkaufszahlen sein und Ihr Produkt in den Mittelpunkt stellen.Slides Framework ist eine Reihe von Vorlagen zum Generieren von einseitigen animierten Layouts.

(Tech- und Design-Tipps)

22 kostenlose Digital Audio Editors zum Download im Jahr 2017

22 kostenlose Digital Audio Editors zum Download im Jahr 2017

Ob Sie Ihre inneren Künstler zeigen möchten, einige Audiokommentare bearbeiten oder heruntergeladene Musik von Creative Commons Website anpassen möchten, es gibt eine Vielzahl von umfassenden kostenlosen Audio-Editing-Software, die Aufnahme und Musik mit Leichtigkeit bewältigen kann.Von allen verfügbaren Optionen im Internet habe ich über 20 digitale Audio-Editoren gefiltert , die völlig kostenlos sind und sowohl für Anfänger als auch für fortgeschrittene Benutzer geeignet sind . Die meis

(Tech- und Design-Tipps)