Så här markerar du automatiskt text vid användarklick

Några innehållsdelar på webbplatser är avsedda att kopieras av användarna, till exempel en URL-adress, en automatiskt genererad API-nyckel eller några rader av kod (snippets). Men att kopiera dessa innehåll kan vara en utmaning, särskilt för användare som använder en styrplatta eller en skitmus. Så låt oss göra det enklare för dem.

Om du har snubblat på webbplatser som TheNextWeb, kommer du att upptäcka att URL-länken är markerad när du klickar på den. Låt oss kolla hur detta är gjort.

Komma igång

Till att börja med lägger vi ut den HTML som wraps URL-länken.

 
 Kort länk 
  http://goo.gl/9JEpOz 
 
 

Vi har webbadressen insvept i en spänna element tillsammans med en ikon från Ionicon. Stilen för dessa element är helt upp till dig, eftersom det beror på din webbplats layout. Men för denna demonstration syftar jag på det här sättet:

Det är enkelt, blått och fyrkantigt (ta tag i stilkoderna här).

JavaScript

Och här är köttet i koden, JavaScript. Planen här är att markera webbadressen som användarna klickar på den.

Vi börjar koden med en variabel som väljer det element som användaren klickar på.

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

De querySelector är en JavaScript-metod för att välja elementet; det fungerar i princip som jQuery-konstruktören ($). Du kan använda pricknotationen för att få elementet i klassen eller # notation för att få ett element av ID.

Därefter måste vi skapa en ny JavaScript-funktion.

 funktionsval (elem)  

Vi heter vår funktion som urval(). Och som du kan se ovan kräver funktionen en parameter för att passera det element som omsluter webbadressen eller någon vanlig text som vi skulle vilja markera. I vårt fall skulle detta vara spänna element med shortlink__url klass.

Inom denna funktion lägger vi till ett par fler variabler:

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

Först, den elem variabel väljer det element som vi passerar genom parametern för funktionen. Den andra variabeln, Välj, kör en inbyggd JavaScript-funktion för att få valet av text. Den sista variabeln, räckvidd kontrollerar urvalsområdet; Vi vill se till att valet endast ligger inom det valda elementet.

Därefter kedjor vi dessa variabler med ett par andra JavaScript-funktioner enligt följande:

 var target = document.querySelector ('. shortlink'); funktionsval (elem) var elem = document.querySelector (elem); var select = window.getSelection (); varintervall = document.createRange (); range.selectNodeContents (ELEM); select.addRange (intervall);  

Den första tillägget, range.selectNodeContents (elem), definierar urval av urvalet vilket i detta fall är elementet som det hänvisas i elem. Den sista raden, select.addRange (intervall) gör valet begränsat till det angivna intervallet.

Bra! Vi är alla med funktionen. Låt oss sätta det i aktion.

Kör det

Vi binder målelementet med en onclick händelse. När elementet är klickat, kör vi funktionen som vi just har gjort och skickar parametern med klassnamnet på det element där webbadressen är invecklad. i det här fallet är det .shortlink__url.

 target.onclick = function () selection ('. shortlink__url'); ; 

Vi är klara. Som tidigare nämnts kan du också göra det för andra typer av innehåll på din webbplats som du kanske vill att dina användare ska kopiera lättare.

Vissa av er kanske undrar om vi kunde automatiskt kopia, istället för att bara markera, klickar du på användarens klick. Även om det här kan verka som en riktigt bra idé är det tyvärr inte ganska lätt att uppnå och kan orsaka en dålig användarupplevelse. Kopiaåtgärden bör vara helt under användarens samtycke.

Stegen i det här inlägget tar bara upp det till höjdpunkten. Oavsett om våra användare skulle kopiera det eller inte, är det helt upp till dem.

Du kan följa med följande länkar för att se demoen eller ladda ner källkoden.

• Visa demo
• Hämta källa