Как сделать выделение текста по клику на сайте

Предполагается, что некоторый контент на сайте пользователи будут копировать — например, адреса URL, автоматически сгенерированный ключ API или несколько строк кода (сниппет). Все это можно упростить и сделать выделение текста по клику.

Но копирование может стать проблемой, особенно для пользователей, которые используют трекпад или плохую мышь. Так давайте упростим им задачу и расскажем как копировать текст автоматически по клику!

Авто-копирование текста по клику мыши

Если вы попадали на зарубежные веб-сайты вроде TheNextWeb.com, вы могли заметить, что сокращенный URL подсвечивается по клику. Давайте проверим, как это сделано.

Приступаем.  Для начала посмотрим на HTML разметку вокруг сокращенного URL.

<div class="shortlink">
    <span class="shortlink__label">Короткая ссылка</span>
        <div class="shortlink__container"> 	        
            <i class="shortlink__icon ion ion-link"></i> 	        
            <span class="shortlink__url">http://goo.gl/GUicr0R</span> 	    
        </div>
</div>

У нас есть ссылка, обернутая в span с иконкой от Ionicons. Стиль этих элементов полностью зависит от вас и дизайн-макета вашего сайта. Но для демонстрационного примера я использую оформление которое показано на скриншоте выше:

Все очень просто, тёмный цвет и прямоугольные формы.

Код javascript для авто-копирования текста

А вот основная суть кода, javascript. По плану URL должен выделяться, когда пользователь кликнул по нему.

В начале кода объявляем переменную, которая содержит элемент, по которому кликнул пользователь.

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

Метод query Selector в javascript позволяет выбрать элемент, он работает подобно конструктору $() в jQuery. Вы можете использовать точку, чтобы выбрать элемент по классу, или # для получения элемента по ID.

Дальше нам нужно создать новую функцию javascript.

 function selection(elem) {
     }

Мы назвали нашу функцию selection() . Как вы видите выше, функция требует передачи параметра, содержащего элемент, в который заключен наш URL или просто текст, который мы хотим выделить. В нашем случае это будет span с классом shortlink__url .

Вам может быть полезно: Как искать и копировать ссылки ваших конкурентов (быстрое руководство)

Добавим в функцию еще несколько переменных:

var target = document.querySelector('.shortlink');
 
 function selection(elem) {
  var elem = document.querySelector(elem);
  var select = window.getSelection();
  var range = document.createRange();
}

Сначала переменная elem выбирает элемент, который мы передали в качестве параметра функции. Вторая переменная, select, содержит результат выполнения встроенной функции javascript для получения выделенного фрагмента текста. Последняя переменная range контролирует пределы выделения. Мы хотим убедиться, что выбор находится в пределах выбранного элемента.

Затем мы связываем эти переменные еще парой функций javascript, вот так:

var target = document.querySelector('.shortlink');
 
 function selection(elem) {
  var elem = document.querySelector(elem);
  var select = window.getSelection();
  var range = document.createRange();
 
     range.selectNodeContents(elem);
    select.addRange(range);
}

Первое дополнение, которое мы внесли —range.selectNodeContents(elem) . Так мы определяем диапазон выбора, который в данном случае задается элементом из переменной elem. Последняя строчка когда, select.addRange(range), ограничивает выделение заданным диапазоном.

Отлично! Мы закончили с написанием функции. Давайте используем ее в деле.

Запускаем авто-выделение

Мы навесили слушателя события onclick на целевой элемент. Когда по элементу кликнут, мы запустим функцию, которую только что написали, и передадим параметр с именем класса элемента, в который обернут URL В нашем случае это .shortlink__url

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

Мы закончили выделение текста по клику. Как упоминалось выше, мы можем проделать то же самое с другими типами содержимого на странице, копирование которого вы хотите упростить пользователям.

Вам может быть полезно: 5 критических проблем IT и бизнеса в 2020 году

Некоторые могут задаться вопросом, можем ли мы копировать сокращенную ссылку автоматически вместо того, чтобы подсвечивать контент по клику пользователя. Хотя это может показаться хорошей идеей, к сожалению, выполнить это не так просто, к тому же это не самый лучший подход с точки зрения пользовательского опыта. Копирование должно оставаться полностью на усмотрение пользователя.

В статье рассматриваются шаги только по подсвечиванию части контента и ответ на вопрос «как копировать текст автоматически по клику». Будет пользователь копировать выделенный элемент или нет, полностью зависит от него.