Slik fjerner du automatisk tekst ved brukerklikk

Noen deler av innhold på nettsteder er ment å bli kopiert av brukerne, for eksempel en URL-adresse, en automatisk generert API-nøkkel eller noen få linjer med kode (utdrag). Men å kopiere disse innholdene kan være en utfordring, spesielt for brukere som bruker en styreflate eller en crappy-mus. Så la oss gjøre det lettere for dem.

Hvis du har snublet på nettsteder som TheNextWeb, vil du oppdage at shortlink URL er markert når du klikker på den. La oss sjekke ut hvordan dette er gjort.

Starter

Til å begynne med legger vi ut HTML-koden som bryter nettadressen til snarveien.

 
 short 
  http://goo.gl/9JEpOz 
 
 

Vi har nettadressen innpakket i en span element sammen med et ikon fra Ionicon. Stilen til disse elementene er helt opp til deg, da det vil avhenge av ditt nettstedoppsett. Men for formålet med denne demonstrasjonen, stiler jeg det på denne måten:

Det er enkelt, blått og firkantet (ta tak i stilkoder her).

JavaScript

Og her er kjøttet av koden, JavaScript. Planen her er å markere nettadressen som brukerne klikker på den.

Vi starter koden med en variabel som velger elementet som brukeren klikker på.

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

De querySelector er en JavaScript-metode for å velge elementet; det fungerer i utgangspunktet som jQuery-konstruktøren $ (). Du kan bruke prikknotasjonen for å få elementet i klassen eller # notat for å få et element av ID.

Deretter må vi opprette en ny JavaScript-funksjon.

 funksjonsvalg (elem)  

Vi heter vår funksjon som valg (). Og som du kan se over, krever funksjonen en parameter for å passere elementet som bryter inn nettadressen eller en vanlig tekst som vi vil fremheve. I vårt tilfelle vil dette være span element med shortlink__url klasse.

Innenfor denne funksjonen legger vi til et par flere variabler:

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

Først elem variabel velger elementet som vi passerer gjennom parameteren til funksjonen. Den andre variabelen, å velge, kjører en innfødt JavaScript-funksjon for å få valget av tekst. Den siste variabelen, område styrer utvalgsområdet; Vi ønsker å sikre at valget bare er innenfor det valgte elementet.

Deretter kjedene vi disse variablene med et par andre JavaScript-funksjoner som følger:

 var target = document.querySelector ('. shortlink'); funksjonsvalg (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); range.selectNodeContents (ELEM); select.addRange (område);  

Det første tillegget, range.selectNodeContents (elem), definerer utvalg av utvalget som i dette tilfellet er elementet som referert i elem. Den siste linjen, select.addRange (range) gjør valget begrenset til det angitte området.

Flott! Vi er alle satt sammen med funksjonen. La oss sette det til handling.

Kjør det

Vi binder målelementet med en ved trykk begivenhet. Når elementet klikkes, kjører vi funksjonen vi nettopp har gjort og sender parameteren med klassenavnet til elementet der nettadressen er pakket inn. i dette tilfellet er det .shortlink__url.

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

Vi er ferdige. Som nevnt tidligere kan du også gjøre det for andre typer innhold på nettstedet ditt, som du kanskje vil at brukerne skal kopiere lettere.

Noen av dere lurer kanskje på om vi kunne automatisk kopiere, i stedet for bare å markere, klikker du på brukeren. Selv om dette kan virke som en veldig god idé, er det dessverre ikke ganske enkelt å oppnå og kan forårsake en dårlig brukeropplevelse. Kopieringsaksjonen skal være fullt ut under brukerens samtykke.

Trinnene i dette innlegget tar bare opp til høydehandlingen. Om brukerne våre vil kopiere det eller ikke, er det helt opp til dem.

Du kan følge gjennom følgende linker for å se demoen eller laste ned kildekoden.

• Se demo
• Last ned kilde