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

Предполагается, что некоторый контент на сайте пользователи будут копировать — например, адреса 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/GUiu0R</span>
</div>
</div>

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

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

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

Метод querySelector в 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');
};

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

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

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