Jak automaticky zvýraznit text na uživatele Klepněte na tlačítko

Některé části obsahu na webových stránkách mají uživatelé kopírovat, například adresu URL, automaticky generovaný klíč API nebo několik řádků kódu (úryvky). Kopírování tohoto obsahu však může být výzvou, zejména pro uživatele, kteří používají trackpad nebo mizernou myš. Ať je to pro ně jednodušší.

Pokud jste narazili na webové stránky jako TheNextWeb, zjistíte, že krátká adresa URL je zvýrazněna, když na něj kliknete. Podívejme se, jak se to dělá.

Začínáme

Začneme tím, že rozložíme HTML, které zabalí URL pro shortlink.

 
 Zkratka 
  http://goo.gl/9JEpOz 
 
 

Máme adresu URL zabalenou v rozpětí prvek spolu s ikonou z Ionicon. Styl těchto prvků je zcela na vás, jak to bude záležet na rozložení vaší webové stránky. Pro účely tohoto dema to ale dělám takto:

Je to jednoduché, modré a čtvercové..

JavaScript

A tady je maso kódu, JavaScript. Plán je tady zvýrazněte adresu URL tak, jak na ni uživatelé kliknou.

Začneme kód s proměnnou, která vybere prvek, ve kterém uživatel klikne.

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

querySelector je metoda JavaScript pro výběr prvku; v podstatě funguje jako konstruktor jQuery $ (). Bodový zápis můžete použít k získání prvku podle třídy nebo # notaci pro získání elementu pomocí ID.

Dále musíme vytvořit novou funkci JavaScript.

 volba funkce (elem)  

Jmenujeme naši funkci jako výběr(). A jak vidíte nahoře, funkce vyžaduje, aby parametr předal prvek, který zabalí adresu URL nebo jakýkoli běžný text, který bychom chtěli zvýraznit. V našem případě by to bylo rozpětí prvek s shortlink__url třída.

V rámci této funkce přidáme několik dalších proměnných:

 var target = document.querySelector ('. shortlink'); výběr funkce (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange ();  

Nejprve elem proměnná vybere prvek, kterým procházíme parametrem funkce. Druhá proměnná, vybrat, spustí nativní JavaScript funkci pro výběr textu. Poslední proměnná, rozsah řídí rozsah výběru; rádi bychom zajistili, že výběr je pouze ve vybraném prvku.

Dále tyto proměnné řetězíme několika dalšími funkcemi JavaScriptu takto:

 var target = document.querySelector ('. shortlink'); výběr funkce (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); range.selectNodeContents (elem); select.addRange (rozsah);  

První doplněk, range.selectNodeContents (elem), definuje rozsahu výběru který je v tomto případě prvkem, na který odkazuje čl. \ t elem. Poslední řádek, select.addRange (rozsah) omezuje výběr na zadaný rozsah.

Skvělý! Všichni jsme s touto funkcí nastaveni. Dejme to do akce.

Spusť to

Cílový prvek svázáme s při kliknutí událost. Když je prvek kliknut, spustíme funkci, kterou jsme právě vytvořili, a předáme parametr s názvem třídy prvku, kde je adresa URL zabalena; v tomto případě to tak je .shortlink__url.

 target.onclick = function () výběr ('. shortlink__url'); ; 

Jsme hotovi. Jak již bylo zmíněno dříve, můžete tak učinit i pro jiné typy obsahu na vašich webových stránkách, které byste mohli chtít, aby uživatelé mohli kopírovat snadněji.

Někteří z vás se možná zajímají, jestli bychom mohli automaticky kopírovat, namísto pouhého zvýraznění, shorturl po kliknutí uživatele. I když se to může jevit jako opravdu dobrý nápad, bohužel není snadné dosáhnout a může způsobit špatnou uživatelskou zkušenost. Akce kopírování by měla být plně pod souhlasem uživatele.

Kroky v tomto příspěvku to berou pouze na akci zvýraznění. Zda naši uživatelé kopírovat nebo ne, je zcela na nich.

Pomocí následujícího odkazu můžete zobrazit demo nebo si stáhnout zdrojový kód.

• Zobrazit ukázku
• Stáhněte si zdroj