Як автоматично виділити текст після натискання користувача

Деякі частини вмісту на веб-сайтах призначені для копіювання користувачами, такі як URL-адреса, автоматично створений ключ API або кілька рядків коду (фрагменти). Але копіювання цього вмісту може бути проблемою, особливо для користувачів, які використовують трекпад або дряну мишу. Так що давайте полегшимо їм.

Якщо ви натрапили на веб-сайти, такі як TheNextWeb, ви побачите, що URL-адреса короткої посилання виділена під час натискання на неї. Давайте перевіримо, як це робиться.

Починаємо

Почнемо з того, що ми викладемо HTML, який переносить URL короткої посилання.

 
 Короткі посилання 
  http://goo.gl/9JEpOz 
 
 

URL-адресу загорнуто в a span з піктограмою Ionicon. Стиль цих елементів повністю залежить від вас, оскільки це буде залежати від розміщення вашого сайту. Але, для цієї демонстрації, я стилю її так:

Він простий, синій і квадратний (тут ви знайдете коди стилів).

JavaScript

А ось м'ясо коду, JavaScript. План тут виділіть URL-адресу, коли користувачі натиснули на неї.

Ми починаємо код зі змінною, що вибирає елемент, у якому користувач натискатиме.

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

The querySelector метод JavaScript для вибору елемента; в основному він працює як конструктор jQuery $ (). Ви можете використовувати позначення крапки, щоб отримати елемент за класом або # позначення для отримання елемента за допомогою ідентифікатора.

Далі нам потрібно створити нову функцію JavaScript.

 вибір функції (елем)  

Ми називаємо нашу функцію як вибір (). І, як ви можете бачити вище, функція вимагає параметр для передачі елемента, який переносить URL або будь-який звичайний текст, який ми хотіли б виділити. У нашому випадку це було б span елемент з shortlink__url клас.

У цій функції ми додаємо ще кілька змінних:

 var target = document.querySelector ('. shortlink'); вибір функції (elem) var elem = document.querySelector (елем); var select = window.getSelection (); var range = document.createRange ();  

По-перше, елем змінна вибирає елемент, який ми передаємо через параметр функції. Друга змінна, виберіть, запускає рідну функцію JavaScript, щоб отримати вибір тексту. Остання змінна, діапазон контролює діапазон вибору; ми хотіли б переконатися, що вибір відбувається тільки в межах вибраного елемента.

Далі ми зв'язали ці змінні з кількома іншими функціями JavaScript наступним чином:

 var target = document.querySelector ('. shortlink'); вибір функції (elem) var elem = document.querySelector (елем); var select = window.getSelection (); var range = document.createRange (); range.selectNodeContents (елемент); select.addRange (діапазон);  

Перше доповнення, range.selectNodeContents (елемент), визначає діапазон вибору що в даному випадку є елементом, який згадується в елем. Останній рядок, select.addRange (діапазон) робить вибір обмеженим вказаним діапазоном.

Чудово! Ми всі налаштовані на цю функцію. Давайте зробимо це в дії.

Запустіть його

Ми зв'язуємо цільовий елемент з onclick події. По мірі натискання елемента ми запускаємо функцію, яку ми тільки що зробили, і передаємо параметр назвою класу елемента, в якому переноситься URL; в даному випадку це так .shortlink__url.

 target.onclick = function () вибір ('. shortlink__url'); ; 

Ми готові. Як згадувалося раніше, ви також можете зробити це для інших типів вмісту на вашому веб-сайті, які ви, можливо, захочете копіювати користувачам легше.

Деякі з вас можуть бути здивовані, якщо ми можемо автоматично копіювати, замість того, щоб просто виділити, shorturl після натискання користувача. Хоча це може здатися дійсно гарною ідеєю, але, на жаль, її нелегко досягти і може призвести до поганого досвіду користувачів. Дія копіювання повинна бути повністю за згодою користувача.

Заходи в цій публікації стосуються лише дії підсвічування. Незалежно від того, чи копіюватимуть наші користувачі чи ні, це залежить тільки від них.

Ви можете перейти за наступними посиланнями, щоб побачити демо або завантажити вихідний код.

• Переглянути демонстрацію
• Завантажити джерело