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

2015-08-11 Создание сайта RastaMan 1 771 0

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

А вот основная суть кода,

javascript

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

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

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

Метод

querySelector

javascript

позволяет выбрать элемент, он работает подобно конструктору

$()

jQuery

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

для получения элемента по

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

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');
};

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

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

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

По ссылкам ниже вы можете посмотреть демо-пример или скачать исходный код.

ДЕМО: Скачать файл: Скачать источники.zip

Добавочные статьи из категории «Создание сайта»