Как автоматически выделить текст при клике пользователя

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

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

У нас есть URL, завернутый в элемент span вместе со значком Ionicon, Стиль этих элементов полностью зависит от вас, так как он будет зависеть от макета вашего сайта. Но, для целей этой демонстрации, я оформляю это так:
Это просто, синий и квадратный (захватить коды стиля здесь).
JavaScript
И вот суть кода, JavaScript. План здесь состоит в том, чтобы выделить URL, когда пользователи нажимают на него.

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

var target = document.querySelector (‘. shortlink’);

QuerySelector – это метод JavaScript для выбора элемента; в основном он работает как конструктор jQuery $ (). Вы можете использовать точечную нотацию, чтобы получить элемент по классу, или # нотацию, чтобы получить элемент по ID.

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

выбор функции (элемент) {

}

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

В этой функции мы добавим еще пару переменных:

var target = document.querySelector (‘. shortlink’);

выбор функции (элемент) {
var elem = document.querySelector (elem);
var select = window.getSelection ();
var range = document.createRange ();
}

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

Далее мы связываем эти переменные с несколькими другими функциями JavaScript следующим образом:

var target = document.querySelector (‘. shortlink’);

выбор функции (элемент) {
var elem = document.querySelector (elem);
var select = window.getSelection ();
var range = document.createRange ();

range.selectNodeContents (эль);
select.addRange (диапазон);
}

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

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

target.onclick = function () {
выбор ( ‘shortlink__url’);
};

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

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

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

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