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

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

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

Начиная

Для начала выложим HTML, который оборачивает шортлинк URL.

 
 Короткая ссылка 
  http://goo.gl/9JEpOz 
 
 

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

Это просто, синий и квадратный (возьмите коды стиля здесь).

JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

Большой! У нас все настроено с функцией. Давайте приведем это в действие.

Запустить его

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

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

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

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

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

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

• Посмотреть демо
• Скачать исходный код