Comment mettre en surbrillance le texte lorsque l'utilisateur clique

Certains éléments de contenu sur des sites Web doivent être copiés par les utilisateurs, tels qu'une adresse URL, une clé d'API générée automatiquement ou quelques lignes de code (extraits). Toutefois, la copie de ces contenus peut constituer un défi, en particulier pour les utilisateurs qui utilisent un trackpad ou une souris de mauvaise qualité. Alors facilitons les choses pour eux.

Si vous êtes tombé sur des sites Web comme TheNextWeb, vous constaterez que l’URL du lien court est mise en surbrillance lorsque vous cliquez dessus. Voyons comment cela se fait.

Commencer

Pour commencer, nous présentons le code HTML qui enveloppe l'URL du lien court.

 
 Lien court 
  http://goo.gl/9JEpOz 
 
 

Nous avons l'URL enveloppé dans un envergure élément avec une icône de Ionicon. Le style de ces éléments dépend entièrement de vous, car cela dépend de la présentation de votre site Web. Mais, aux fins de cette démo, je l’appelle ainsi:

C'est simple, bleu et carré (attrapez les codes de style ici).

Le javascript

Et voici la viande du code, le JavaScript. Le plan ici est de surlignez l'URL lorsque les utilisateurs cliquent dessus.

Nous commençons le code avec une variable qui sélectionne l'élément dans lequel l'utilisateur cliquera.

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

le querySelector est une méthode JavaScript pour sélectionner l'élément. cela fonctionne fondamentalement comme le constructeur jQuery $ (). Vous pouvez utiliser la notation par points pour obtenir l'élément par la classe ou # notation pour obtenir un élément par l'ID.

Ensuite, nous devons créer une nouvelle fonction JavaScript.

 sélection de fonction (elem)  

Nous nommons notre fonction comme sélection(). Et comme vous pouvez le voir ci-dessus, la fonction nécessite un paramètre pour transmettre l’élément qui enveloppe l’URL ou tout texte normal que nous voudrions mettre en évidence. Dans notre cas, ce serait le envergure élément avec le shortlink__url classe.

Dans cette fonction, nous ajoutons quelques variables supplémentaires:

 var target = document.querySelector ('. shortlink'); sélection de fonction (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange ();  

Premièrement le elem variable sélectionne l'élément que nous passons à travers le paramètre de la fonction. La deuxième variable, sélectionner, exécute une fonction JavaScript native pour obtenir la sélection de texte. La dernière variable, intervalle contrôle la plage de sélection; nous aimerions nous assurer que la sélection est uniquement dans l'élément sélectionné.

Ensuite, nous enchaînons ces variables avec quelques autres fonctions JavaScript, comme suit:

 var target = document.querySelector ('. shortlink'); sélection de fonction (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); range.selectNodeContents (elem); select.addRange (gamme);  

Le premier ajout, range.selectNodeContents (elem), définit le gamme de la sélection qui, dans ce cas, est l'élément en tant que référencé dans le elem. La dernière ligne, select.addRange (range) rend la sélection limitée à la plage spécifiée.

Génial! Nous sommes tous ensemble avec la fonction. Mettons cela en action.

Exécuter

Nous lions l’élément cible avec un sur clic un événement. Lorsque vous cliquez sur l'élément, nous lançons la fonction que nous venons de créer et transmettons le paramètre avec le nom de classe de l'élément où l'URL est renvoyée. dans ce cas c'est .shortlink__url.

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

Nous avons fini. Comme mentionné précédemment, vous pouvez également le faire pour d'autres types de contenu sur votre site Web que vous voudrez peut-être que vos utilisateurs copient plus facilement..

Certains d'entre vous pourraient se demander si nous pourrions automatiquement copie, au lieu de simplement mettre en évidence, le raccourci au clic de l'utilisateur. Bien que cela puisse sembler une très bonne idée, ce n’est malheureusement pas facile à réaliser et risque de créer une mauvaise expérience utilisateur. L'action de copie doit être entièrement avec le consentement de l'utilisateur.

Les étapes de ce post ne font que remonter à l'action de surbrillance. Que nos utilisateurs le copient ou non, cela leur appartient entièrement.

Vous pouvez suivre les liens suivants pour voir la démo ou télécharger le code source.

• Voir la démo
• Source de téléchargement