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. Dus laten we het hen gemakkelijker maken.

Als je op websites als TheNextWeb bent gestuit, zul je merken dat de URL van de link is gemarkeerd wanneer je 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 verpakt in een 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 hier de stijlcodes).

JavaScript

En hier is het vlees van de code, de JavaScript. Het plan hier is om de URL te markeren 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 # notatie te laten ophalen om een ​​element door de ID te krijgen.

Vervolgens moeten we een nieuwe JavaScript-functie maken.

 functieselectie (elem) {} 

We noemen onze functie als selection() . 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 spanelement zijn met de klasse shortlink__url .

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 selecteert de elemvariabele het element dat we door de parameter van de functie passeren. De tweede variabele, select, voert een native JavaScript-functie uit om de selectie van tekst te krijgen. De laatste variabele, range 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 het bereik van de selectie dat in dit geval het element is waarnaar wordt verwezen in het elem . De laatste regel, select.addRange(range) 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 onclick gebeurtenis. 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 .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 de shorturl na klikken van de gebruiker zouden kunnen kopiëren in plaats van alleen maar te markeren. Hoewel dit misschien 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.

Je kunt de volgende links volgen om de demo te bekijken of de broncode te downloaden.

• Demo bekijken
• Download de bron