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 inn URL-adressen.

 short 
 http://goo.gl/9JEpOz 

Vi har nettadressen innpakket i et span sammen med et ikon fra Ionicon. Stilen til disse elementene er helt opp til deg, da det vil avhenge av ditt nettstedoppsett. Men i form av 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'); 

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

Deretter må vi opprette en ny JavaScript-funksjon.

 funksjonsvalg (elem) {} 

Vi heter vår funksjon som selection() . 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 med shortlink__url klassen.

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 velger elem variabelen elementet som vi passerer gjennom parameteren til funksjonen. Den andre variabelen, select, kjører en innfødt JavaScript-funksjon for å få valget av tekst. Den siste variabelen, range styrer utvalgsområdet; Vi vil gjerne sørge for 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 utvalgets utvalg som i dette tilfellet er elementet som referert i elem . Den siste linjen, select.addRange(range) gjør at valget er 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 onclick hendelse. Når elementet klikkes, kjører vi funksjonen vi nettopp har gjort og sender parameteren med klassenavnet til elementet der nettadressen er innpakket. 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 kopiere i stedet for bare å markere, shorturl ved brukerklikk. 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. Hvorvidt våre brukere vil kopiere det eller ikke, er helt opp til dem.

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

• Se demo
• Last ned kilde