Jak automatycznie zaznaczać tekst po kliknięciu przez użytkownika

Niektóre fragmenty treści na stronach internetowych mają być kopiowane przez użytkowników, takie jak adres URL, automatycznie generowany klucz API lub kilka wierszy kodu (fragmenty). Ale kopiowanie tych treści może być wyzwaniem, szczególnie dla użytkowników, którzy używają gładzika lub gównianej myszy. Ułatwmy im to.

Jeśli natknąłeś się na strony takie jak TheNextWeb, przekonasz się, że adres URL shortlink jest podświetlony po kliknięciu na niego. Sprawdźmy, jak to się robi.

Rozpoczęcie pracy

Na początek przedstawiamy kod HTML, który otacza adres URL krótkiego linku.

 
 Krótki link 
  http://goo.gl/9JEpOz 
 
 

Mamy adres URL zawinięty w przęsło element wraz z ikoną z Ionicon. Styl tych elementów zależy wyłącznie od Ciebie, ponieważ zależy to od układu strony. Ale dla celów tego demo stylizuję to w ten sposób:

Jest prosty, niebieski i kwadratowy (pobierz tutaj kody stylów).

JavaScript

A oto mięso kodu, JavaScript. Plan jest tutaj podświetl adres URL, gdy użytkownicy go klikną.

Kod zaczynamy od zmiennej, która wybiera element, w którym użytkownik kliknie.

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

The querySelector to metoda JavaScript do wyboru elementu; w zasadzie działa jak konstruktor jQuery $ (). Możesz użyć notacji kropkowej, aby uzyskać element przez klasę lub # notacja, aby uzyskać element według ID.

Następnie musimy utworzyć nową funkcję JavaScript.

 wybór funkcji (elem)  

Nazywamy naszą funkcję jako wybór(). Jak widać powyżej, funkcja wymaga parametru, aby przekazać element zawijający adres URL lub dowolny zwykły tekst, który chcielibyśmy wyróżnić. W naszym przypadku byłoby to przęsło element z shortlink__url klasa.

W ramach tej funkcji dodajemy kilka dodatkowych zmiennych:

 var target = document.querySelector ('. shortlink'); wybór funkcji (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange ();  

Po pierwsze elem zmienna wybiera element, który przechodzimy przez parametr funkcji. Druga zmienna, Wybierz, uruchamia natywną funkcję JavaScript, aby uzyskać wybór tekstu. Ostatnia zmienna, zasięg kontroluje zakres wyboru; chcielibyśmy zapewnić, aby wybór był tylko w wybranym elemencie.

Następnie łączymy te zmienne z kilkoma innymi funkcjami JavaScript w następujący sposób:

 var target = document.querySelector ('. shortlink'); wybór funkcji (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); range.selectNodeContents (elem); select.addRange (zakres);  

Pierwszy dodatek, range.selectNodeContents (elem), definiuje zakres wyboru który w tym przypadku jest elementem, o którym mowa w elem. Ostatnia linia, select.addRange (zakres) sprawia, że ​​wybór jest ograniczony do określonego zakresu.

Świetny! Wszyscy jesteśmy ustawieni za pomocą funkcji. Uruchommy to.

Uruchom

Łączymy element docelowy za pomocą na kliknięcie zdarzenie. Po kliknięciu elementu uruchamiamy właśnie utworzoną funkcję i przekazujemy parametr z nazwą klasy elementu, w którym zawijany jest adres URL; w tym przypadku tak jest .shortlink__url.

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

Skończyliśmy. Jak wspomniano wcześniej, możesz to zrobić również w przypadku innych typów treści na swojej stronie internetowej, które możesz chcieć łatwiej kopiować.

Niektórzy z was mogą się zastanawiać, czy moglibyśmy automatycznie Kopiuj, zamiast podświetlić skrót po kliknięciu przez użytkownika. Chociaż może się to wydawać naprawdę dobrym pomysłem, niestety nie jest to łatwe do osiągnięcia i może powodować złe wrażenia użytkownika. Czynność kopiowania powinna być w pełni zgodna z opinią użytkownika.

Kroki w tym poście dotyczą tylko akcji podświetlenia. To, czy nasi użytkownicy będą go kopiować, czy nie, zależy wyłącznie od nich.

Możesz śledzić poniższe linki, aby zobaczyć prezentację lub pobrać kod źródłowy.

• Wyświetl demo
• Pobierz źródło