Как да маркирате текста автоматично след кликване върху потребителя

Някои части от съдържанието на уебсайтове са предназначени да бъдат копирани от потребителите, като например URL адрес, автоматично генериран API ключ или няколко реда код (фрагменти). Но копирането на това съдържание може да бъде предизвикателство, особено за потребители, които използват тракпад или дрямка. Така че нека им улесним.

Ако сте се натъкнали на сайтове като TheNextWeb, ще откриете, че URL адресът на късата връзка е маркиран, когато кликнете върху него. Нека проверим как се прави това.

Приготвяме се да започнем

Като начало излагаме HTML, който обгръща URL адреса на късата връзка.

 
 Shortlink 
  http://goo.gl/9JEpOz 
 
 

URL адресът е опакован в a педя елемент заедно с икона от Ionicon. Стилът на тези елементи зависи изцяло от вас, тъй като ще зависи от оформлението на вашия уебсайт. Но за целта на тази демонстрация го оформям по следния начин:

Тя е проста, синя и квадратна (вземете тук кодовете на стила).

JavaScript

И тук е месото на кода, JavaScript. Планът тук е да маркирайте URL адреса, като кликнете върху него.

Започваме кода с променлива, която избира елемента, в който потребителят ще щракне.

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

Най- querySelector е JavaScript метод за избор на елемента; той всъщност работи като jQuery конструктор $ (). Можете да използвате точкова нотация, за да получите елемента от класа или # нотация за получаване на елемент от идентификатора.

След това трябва да създадем нова JavaScript функция.

 избор на функция (елем)  

Назоваваме функцията си като избор (). Както можете да видите по-горе, функцията изисква параметър, който да премине елемента, който обвива URL или редовен текст, който бихме искали да подчертаем. В нашия случай това ще бъде педя елемент с shortlink__url клас.

В тази функция добавяме още няколко променливи:

 var target = document.querySelector (". shortlink"); избор на функция (elem) var elem = document.querySelector (елем); var select = window.getSelection (); var range = document.createRange ();  

Първо, ELEM променливата избира елемента, който преминаваме през параметъра на функцията. Втората променлива, изберете, изпълнява родната функция на JavaScript, за да получи избора на текст. Последната променлива, диапазон контролира обхвата на избор; бихме искали да гарантираме, че изборът е само в избрания елемент.

След това, верифицираме тези променливи с няколко други функции на JavaScript, както следва:

 var target = document.querySelector (". shortlink"); избор на функция (elem) var elem = document.querySelector (елем); var select = window.getSelection (); var range = document.createRange (); range.selectNodeContents (ELEM); select.addRange (гама);  

Първото допълнение, range.selectNodeContents (ELEM), определя обхват на избора което в този случай е елементът, посочен в ELEM. Последният ред, select.addRange (обхват) прави избора ограничен до посочения диапазон.

Страхотен! Всички сме настроени с функцията. Нека го приложим в действие.

Пусни го

Свързваме целевия елемент с OnClick събитие. С натискането на елемента изпълняваме функцията, която току-що направихме, и предаваме параметъра с името на класа на елемента, където е опакован URLът; в този случай е така .shortlink__url.

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

Готови сме. Както споменахме по-рано, можете да го направите и за други видове съдържание на уебсайта си, които може да искате вашите потребители да копират по-лесно.

Някои от вас може би се чудят дали можем автоматично копие, вместо просто да подчертаете, shorturl при кликване върху потребителя. Макар че това може да изглежда като наистина добра идея, за съжаление не е лесно да се постигне и може да доведе до лош потребителски опит. Действието за копиране трябва да бъде изцяло съгласно съгласието на потребителя.

Стъпките в тази публикация се отнасят само до действието за маркиране. Дали нашите потребители ще го копират или не, зависи изцяло от тях.

Можете да следвате следните връзки, за да видите демото или да изтеглите изходния код.

• Преглед на демо
• Изтеглете Източник