Hoe automatisch tekst markeren bij gebruikersklik

Sommige delen van inhoud op websites zijn bedoeld om te worden gekopieerd door de gebruikers, zoals een URL-adres, een automatisch gegenereerde API-sleutel of een paar coderegels (fragmenten). Maar het kopiëren van deze inhoud kan een uitdaging zijn, vooral voor gebruikers die een trackpad of een waardeloze muis gebruiken. Laten we het hen dus gemakkelijker maken.

Als u op websites zoals TheNextWeb bent gestuit, zult u merken dat de URL van de link is gemarkeerd wanneer u erop klikt. Laten we eens kijken hoe dit is gebeurd.

Ermee beginnen

Om te beginnen geven we de HTML-code op die de URL van de verkorte koppeling omspant.

 
 Korte link 
  http://goo.gl/9JEpOz 
 
 

We hebben de URL ingepakt in a span element samen met een pictogram van Ionicon. De stijl van deze elementen is geheel aan jou, omdat dit afhangt van de lay-out van je website. Maar, voor het doel van deze demo, style ik het op deze manier:

Het is eenvoudig, blauw en vierkant (pak de stijlcodes hier).

JavaScript

En hier is het vlees van de code, de JavaScript. Het plan is om dit te doen markeer de URL terwijl de gebruikers erop klikken.

We beginnen de code met een variabele die het element selecteert waarop de gebruiker klikt.

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

De querySelector is een JavaScript-methode om het element te selecteren; het werkt in principe hetzelfde als de jQuery-constructor $ (). U kunt de puntnotatie gebruiken om het element door de klasse of te krijgen # notatie om een ​​element te krijgen door de ID.

Vervolgens moeten we een nieuwe JavaScript-functie maken.

 functieselectie (elem)  

We noemen onze functie als selectie(). En zoals u hierboven kunt zien, vereist de functie een parameter om het element door te geven dat de URL omsluit of een normale tekst die we willen markeren. In ons geval zou dit het span element met de shortlink__url klasse.

Binnen deze functie voegen we nog een aantal variabelen toe:

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

Eerst de elem variabele selecteert het element dat we door de parameter van de functie passeren. De tweede variabele, kiezen, voert een native JavaScript-functie uit om de selectie van tekst te krijgen. De laatste variabele, reeks bestuurt het selectiebereik; we willen ervoor zorgen dat selectie alleen binnen het geselecteerde element plaatsvindt.

Vervolgens ketenen we deze variabelen als volgt met een aantal andere JavaScript-functies:

 var target = document.querySelector ('. shortlink'); functieselectie (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var bereik = document.createRange (); range.selectNodeContents (elem); select.addRange (bereik);  

De eerste toevoeging, range.selectNodeContents (elem), definieert de bereik van de selectie wat in dit geval het element is waarnaar wordt verwezen in de elem. De laatste regel, select.addRange (bereik) maakt de selectie beperkt tot het opgegeven bereik.

Super goed! We zijn allemaal klaar met de functie. Laten we het in actie brengen.

Voer het uit

We binden het doelelement met een bij klikken evenement. Terwijl er op het element wordt geklikt, voeren we de functie uit die we zojuist hebben gemaakt en geven we de parameter door met de klassenaam van het element waar de URL is ingepakt; in dit geval is het dat .shortlink__url.

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

We zijn klaar. Zoals eerder vermeld, kunt u dit ook doen voor andere soorten inhoud op uw website waarvan u wilt dat uw gebruikers deze gemakkelijker kunnen kopiëren.

Sommigen van jullie vragen zich misschien af ​​of we dat automatisch zouden kunnen kopiëren, in plaats van alleen te markeren, wordt de shorturl na klikken van de gebruiker weergegeven. Hoewel dit een heel goed idee lijkt, is het helaas niet zo eenvoudig te bereiken en kan het een slechte gebruikerservaring veroorzaken. De kopieeractie moet volledig worden goedgekeurd door de gebruiker.

De stappen in dit bericht leiden alleen tot de actie met hoogtepunten. Of onze gebruikers het zouden kopiëren of niet, is geheel aan hen.

U kunt de volgende koppelingen volgen om de demo te bekijken of de broncode te downloaden.

• Demo bekijken
• Download de bron