Tekstin automaattinen korostaminen käyttäjän napsautuksella

Jotkin verkkosivustojen sisällöt on tarkoitettu käyttäjien kopioimiseksi, kuten URL-osoite, automaattisesti luotu API-avain tai muutama koodirivi (katkelmia). Näiden sisältöjen kopioiminen voi kuitenkin olla haaste, etenkin käyttäjille, jotka käyttävät ohjauslevyä tai crappy-hiirtä. Joten helpotetaan heitä.

Jos olet törmännyt sivustoihin kuten TheNextWeb, huomaat, että linkin URL-osoite on korostettuna, kun napsautat sitä. Katsotaanpa, miten tämä tehdään.

Päästä alkuun

Ensinnäkin asetamme HTML-koodin, joka yhdistää linkin URL-osoitteen.

 
 Shortlink 
  http://goo.gl/9JEpOz 
 
 

URL-osoite on pakattu a jänneväli Ioniconin kuvake. Näiden elementtien tyyli on täysin sinusta riippuvainen, koska se riippuu sivustosi ulkoasusta. Mutta tässä demossa tarkoitan sitä tällä tavalla:

Se on yksinkertainen, sininen ja neliö (tartu tyylikoodeihin täällä).

JavaScript

Ja tässä on koodin liha, JavaScript. Suunnitelma on täällä korosta URL-osoite, kun käyttäjät napsauttavat sitä.

Aloitamme koodin muuttujalla, joka valitsee elementin, johon käyttäjä napsauttaa.

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

querySelector on JavaScript-menetelmä elementin valitsemiseksi; se toimii pohjimmiltaan kuin jQuery-konstruktori $ (). Voit käyttää pistemerkintää, jos haluat saada luokan luokan tai # tunnus, jonka avulla saat tunnuksen ID: stä.

Seuraavaksi meidän on luotava uusi JavaScript-toiminto.

 funktion valinta (elem)  

Nimemme funktiomme nimellä valinta(). Ja kuten edellä näet, toiminto vaatii parametrin, joka siirtää URL-osoitteen käärittävän elementin tai minkä tahansa tavallisen tekstin, jonka haluaisimme korostaa. Meidän tapauksessamme tämä olisi jänneväli elementin kanssa shortlink__url luokka.

Tämän toiminnon sisällä lisätään pari muuta muuttujaa:

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

Ensinnäkin elem muuttuja valitsee elementin, joka kulkee funktion parametrin läpi. Toinen muuttuja, valita, suorittaa natiivin JavaScript-toiminnon saadaksesi tekstin valinnan. Viimeinen muuttuja, alue ohjaa valintaväliä; haluamme varmistaa, että valinta on vain valitun elementin sisällä.

Seuraavaksi ketjutamme nämä muuttujat pari muuta JavaScript-toimintoa seuraavasti:

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

Ensimmäinen lisäys, range.selectNodeContents (elem), määrittelee valikoima joka tässä tapauksessa on se osa, johon viitataan elem. Viimeinen rivi, select.addRange (alue) tekee valinnan rajoitetuksi määritetylle alueelle.

Loistava! Meillä on kaikki toiminnot. Let's laittaa sen toimintaan.

Suorita se

Me sitomme kohdeelementin klikkaamalla tapahtuma. Kun elementtiä napsautetaan, suoritamme juuri tekemäsi toiminnon ja välitämme parametrin sen elementin luokan nimen kanssa, johon URL on pakattu; tässä tapauksessa se on .shortlink__url.

 target.onclick = toiminto () valinta ('. shortlink__url'); ; 

Olemme valmiita. Kuten aiemmin mainittiin, voit tehdä sen myös muille verkkosivustosi sisällöille, joita käyttäjät haluavat kopioida helpommin.

Jotkut teistä saattavat ihmetellä, voisimmeko automaattisesti kopio, korosta vain, että käyttäjä napsauttaa napsahtaa. Vaikka tämä saattaa tuntua todella hyvältä, se ei valitettavasti ole kovin helppo saavuttaa, ja se voi aiheuttaa huonon käyttäjäkokemuksen. Kopiointitoimen on oltava täysin käyttäjän suostumuksella.

Tämän viestin vaiheet vievät sen ylös vain korostustoimintoon. Riippumatta siitä, ovatko käyttäjät kopioineet sen vai eivät, ne ovat täysin niiden vastuulla.

Voit seurata demoja tai ladata lähdekoodin seuraavien linkkien kautta.

• Näytä demo
• Lataa lähde