Sådan fremhæves tekst automatisk ved brugerklik

Nogle indholdstyper på hjemmesider skal kopieres af brugerne, f.eks. En URL-adresse, en automatisk genereret API-nøgle eller nogle få linjer kode (uddrag). Men at kopiere disse indhold kan være en udfordring, især for brugere, der bruger en trackpad eller en crappy mouse. Så lad os gøre det nemmere for dem.

Hvis du har snuble på hjemmesider som TheNextWeb, vil du opdage, at linklink-URL'en er markeret, når du klikker på den. Lad os se, hvordan dette er gjort.

Kom i gang

Til at begynde med lægger vi ud HTML-koden, der ombryder webadressen til shortlink.

 
 Shortlink 
  http://goo.gl/9JEpOz 
 
 

Vi har URL'en indpakket i en span element sammen med et ikon fra Ionicon. Stilen af ​​disse elementer er helt op til dig, da det vil afhænge af dit website layout. Men i formålet med denne demo stiler jeg det på denne måde:

Det er enkelt, blåt og firkantet (tag stilkoderne her).

JavaScript

Og her er kød af koden, JavaScript. Planen her er at fremhæv webadressen som brugerne klikker på den.

Vi starter koden med en variabel, der vælger det element, som brugeren vil klikke på.

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

Det querySelector er en JavaScript-metode til at vælge elementet; det fungerer grundlæggende som jQuery-konstruktøren $ (). Du kan bruge prikken notationen til at få elementet i klassen eller # notation for at få et element af id'et.

Dernæst skal vi oprette en ny JavaScript-funktion.

 funktion selektion (elem)  

Vi navngiver vores funktion som udvælgelse(). Og som du kan se ovenfor kræver funktionen en parameter til at passere det element, der ombryder webadressen eller en almindelig tekst, vi gerne vil fremhæve. I vores tilfælde ville dette være span element med shortlink__url klasse.

Inden for denne funktion tilføjer vi et par flere variabler:

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

For det første elem variabel vælger det element, som vi passerer gennem parameteren for funktionen. Den anden variabel, Vælg, kører en indfødt JavaScript-funktion for at få valget af tekst. Den sidste variabel, rækkevidde styrer markeringsområdet; Vi vil gerne sikre, at udvælgelsen kun er inden for det valgte element.

Derefter kæde vi disse variabler med et par andre JavaScript-funktioner som følger:

 var target = document.querySelector ('. shortlink'); funktion selektion (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); range.selectNodeContents (ELEM); select.addRange (interval);  

Den første tilføjelse, range.selectNodeContents (elem), definerer rækkevidde af udvælgelsen som i dette tilfælde er elementet henvist til i elem. Den sidste linje, select.addRange (interval) gør udvælgelsen begrænset til det specificerede interval.

Store! Vi er alle sammen med funktionen. Lad os sætte det i gang.

Kør det

Vi binder målelementet med en onclick begivenhed. Når elementet klikkes, kører vi den funktion, vi netop har lavet, og sender parameteren med klassens navn på elementet, hvor URL'en er pakket ind. i dette tilfælde er det .shortlink__url.

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

Vi er færdige. Som tidligere nævnt kan du også gøre det for andre typer indhold på din hjemmeside, som du måske vil have dine brugere til at kopiere lettere.

Nogle af jer undrer måske over, om vi kunne automatisk kopi, i stedet for bare at fremhæve, klikker du på brugeren. Selv om dette kan virke som en rigtig god ide, er det desværre ikke helt let at opnå og kan forårsage en dårlig brugeroplevelse. Kopihandlingen skal være fuldt ud under brugerens samtykke.

Trinnene i dette indlæg tager det kun op i højdepunktet. Uanset om vores brugere vil kopiere det eller ej, er det helt op til dem.

Du kan følge nedenstående links for at se demoen eller downloade kildekoden.

• Se Demo
• Download kilde