Это краткое руководство объясняет, как реализовать копирование текста в буфер обмена с помощью JavaScript одним нажатием кнопки.
В примере, продемонстрированном ниже, нажмите кнопку «Copy», чтобы скопировать содержимое текстового поля в буфер обмена.
Это удобно, когда пользователям приходится копировать длинный текст.
Содержание
- Структура
- Стили
- Скрипт
- Пример:
- Смотрите также:
- Добавить комментарий:
- Комментарии:
- Установка
- Расширяем возможности
- Взглянем на API
- Clipboard.js + PrismJS
Структура
Создайте текстовое поле input. В качестве значения атрибута value задайте текст, который будет отображаться в поле по умолчанию. Также создайте кнопку, на которую пользователь будет нажимать, чтобы скопировать текст.
Стили
Примените стили к текстовому полю и кнопке.
Скрипт
Присвоим текстовое поле и кнопку переменным text и btn. При нажатии кнопки будет вызвана функция, которая выполняет следующие две задачи:
Функция на jQuery, которая позволяет скопировать нужный текст в буфер обмена пользователя
Иногда бывает нужно поставить кнопку, нажав на которую, пользователь мог бы занести в буфер обмена какой-то текст.
В данном примере этот текст берется не из полей формы, а со страницы.
Пример:
При нажатии на соответствующую кнопку ниже скопируется этот текст
Или этот, если нажать другую.
При нажатии на соответствующую кнопку ниже скопируется этот текст.
Или этот, если нажать другую.
Копирование происходит через функцию copytext(element) , например:
Добавить в буфер
Если в копируемом тексте не нужны переносы строк, то вместо:
- Опубликовано: 14.02.2019 / Обновлено: 05.06.2019
- Рубрики: Тексты, ссылки и кнопки — простые решения
- Метки: jQuery
- 2805 просмотров
Смотрите также:
Текст с исчезающими буквами
Вариант оформления заголовка с исчезающими и появляющимися буквами
Угловое разделение цвета и фона текста на CSS
Вариант оформления заголовка угловым разделением его цвета и фона
Переливающийся текст на CSS
Переливающийся текст c помощью анимации линейного градиента
Добавить комментарий:
Комментарии:
Доброго дня.
Если возможно, объясните пожалуйста каждую строку кода js, буду очень вам благодарен.
Спасибо за ответ
«);
я понимаю эту строку, как поиск тега
у меня на странице данного тега нет
такой строкой я могу любой тег в переменную положить?
select() — это выделить текст? Друг гугол не отвечает на этот вопрос)
document.execCommand(«copy»); — как этот метод понимает, что нужно скопировать наши данные?
я понимаю эту строку, как поиск тега
Нет, это создание переменной с ней (потом ее и вставляем)
Чтобы не вставлять 3 раза $(«
select() — это выделить текст? Друг гугол не отвечает на этот вопрос)
Да, это выделяет потом то что создали и куда вставили.
А это копирует то что выделили
Метод select() используется с элементом (с текстовым типом type = «text») и элементом
.
Поэтому нам и приходится создать такой временный элемент, воткнуть туда текст из нужного нам элемента, потом выделить, скопировать в буфер и удалить все это
А как убрать расстояние между двумя кнопками?
Дата публикации: 2015-12-04
От автора: часто приходится копировать какой-либо текст, кусочек кода или адрес со страниц сайта. Чтобы скопировать текст, его сначала необходимо выделить и затем открыть контекстное меню браузера или воспользоваться сочетанием клавиш. Однако, если на вашем сайте часто приходится копировать контент, и вы беспокоитесь об удобстве пользователей, можно упростить этот процесс с помощью clipboard.js. На сайте GitHub, к примеру, есть кнопка скопировать URL репозитория.
На сайте Bit.ly есть похожая кнопка для копирования коротких URL’ов. Есть контент, который просто необходимо скопировать. Вот в таких случаях очень удобна эта кнопка.
Раньше добавить такую кнопку было очень трудно, все из-за запрета в браузерах. Большинству разработчиков приходилось пользоваться Flash библиотеками типа Clippy. К нашему счастью, теперь у нас есть JS библиотека, облегчающая эту задачу. И это Clipboard.js. В этом уроке для новичков я расскажу, как эффективно использовать данный инструмент.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Установка
Чтобы установить Clipboard.js, необходимо загрузить файл в подходящую папку на сайте и дать на нее ссылку в документе. Или можно дать ссылку на CDN, добавьте ссылку ниже в HTML код страницы:
Нам необходимо создать два элемента. Один, целевой, для хранения копируемого контента. Целевым элементом может быть, к примеру, input (с ID), содержащий короткий URL:
Второй элемент это триггер. В нашем случае – кнопка. В триггере указывается data атрибут data-clipboard-target. В качестве значения задается ID целевого элемента:
После добавления этих двух элементов в разметку страницы можно включать Clipboard.js. Для этого необходимо добавить код ниже между тегов script или подключить код отдельным файлом.
Готово! По клику на кнопку мы теперь можем копировать короткий URL.
Расширяем возможности
В некоторых ситуациях просто нельзя добавить к целевому элементу ID, класс или data-* атрибут – при работе со старым контентом или с несколькими целевыми элементами может что-нибудь произойти.
Как пример, у нас есть веб-сайт. Контент сайта состоит из параграфов текста и кусков кода. Для подсветки синтаксиса мы будем использовать прекрасную библиотеку PrismJS. Но в PrismJS нет кнопки «скопировать», и мы хотим ее добавить с помощью Clipboard.js. Но проблема в том, что у нас сотни страниц на сайте с таким контентом. Тут нам поможет Clipboard.js API.
Взглянем на API
В Clipboard.js есть два события: success и error. События проверяют, удачно или неудачно был скопирован контент. В Safari, скорее всего, будет постоянно срабатывать событие error, так как браузер не поддерживает команды копировать/вырезать из метода execCommand, на который полагается Clipboard.js. События возвращают следующие свойства:
action: возвращается действие, которое мы выполнили по отношению к целевому элементу. Т.е. copy или cut
text: возвращается только по событию success. В свойстве хранится текст, скопированный или вырезанный из целевого элемента.
trigger: возвращает триггер, который копирует или вырезает текст.
С помощью API можно встроить Clipboard.js в наш сайт без изменения разметки, не надо изменять элементы-обертки. В нашем случае, мы можем воспользоваться им для добавления кнопки «скопировать» для кода.
Clipboard.js + PrismJS
На этом этапе у нас уже должен быть установлен PrismJS (загрузите файл в папку на сайте и дайте ссылку на него). Каждый кусок кода в нашей разметке помещен в теги pre и code с классом language-. В нашем примере мы используем код LESS, т.е. необходимо добавить класс language-less:
Источник: