Как сделать кнопку скопировать в буфер обмена react
Обновлено: 05.07.2024
Задача простая – копировать текст из какого-то блока нажатием кнопки, например, это может быть код купона или ссылка на статью в конце самой статьи. Согласитесь – довольно таки удобно, вместо выделения и копирования просто нажать одну кнопку и нужный текст уже в буфере обмена.
Самый простой и примитивный HTML для примера:
Ну и самая главная часть – скрипт, который выполнит всю работу:
Думаю, сильно подробно разбирать код нет смысла. Но в двух словах:
Функция copyToClipboard(element) скопирует в буфер содержимое заданного блока.
Копирование произойдет при нажатии на кнопку ".coupon-btn" .
Ниже рабочий пример, в котором так же добавлено поле, чтобы вставить в него содержимое из буфера и проверить работоспособность кода:
Рекомендую к прочтению:
Vital
какой-то грязный метод… создаётся элемент, потом он удяляется.
есть же getSelection!
Denis Creative
для getSelection() нужно текст выделить, для примера в статье нужно только нажать кнопку, это идеально подходит для различных акций или купонов.
Дмитрий
Заменил on("click", на click( и все заработало
А как сделать как что бы текста который копируется НЕ БЫЛО ВИДНО на странице?
Clipboard.js - библиотека, позволяющая вам без особого труда делать кнопки копирования в буфер обмена на чистом JavaScript.
Зачем обычно необходимо использовать копирование в буфер обмена на сайте? Как правило это кнопка, по нажатию на которую в буфере обмена должен оказаться текст из, например, input или просто любой заданный текст.
Итак, подключаем библиотеку на нашу страничку, например через CDN (как использовать GitHub как CDN):
Затем, проще всего использовать библиотеку с помощью HTML5 атрибутов, например так:
Получаем вот такой результат:
Вообще, данная библиотека обладает массой возможностей: можно не копировать, а вырезать текст, можно копировать текст из атрибута элемента и отлавливать события.
Поддержка браузеров: Chrome, Firefox, Opera, IE 9+
В Сафари к сожалению плагин работать не будет. Совсем не будет, по техническим причинам.
как сделать на js или jquery что бы я смог по нажатию на блок скопировать тект который приходит мне?
так не работает(
4 ответа 4
Вопрос много просматривают, поэтому соберу сюда более общие примеры.
Для копирования существует метод document.execCommand('copy') , он копирует текущий выделенный текст на странице, если был вызван пользователем (например, при клике). Т.е. не получится просто запустить скрипт на странице и подсунуть любому посетителю текст без его ведома.
А для элементов
и есть простой метод .select()
Далее, захочется как-то оповестить человеку, что копирование сработало. Это тоже может быть в виде функции, которая получает кнопку, меняет её детали, а через пару секунд возвращает всё на место. Примерно так:
В итоге задача сводится только к тому, как вы будете передавать текст в функцию. А это уже достаточно просто. Несколько примеров:
Программирование и разработка
Доступ к буферу обмена ОС с помощью браузера JavaScript возможен уже несколько лет document.execCommand().
К сожалению, есть некоторые проблемы:
- доступ к буферу обмена является синхронным, что влияет на производительность и безопасность;
- поддержка неоднородна, особенно в старых версиях Safari на macOS и iOS;
- доступ к разрешениям различается в зависимости от браузера;
- API никогда не мог считаться элегантным;
Наконец, его заменил новый API асинхронного буфера обмена. Он новый, и ни один браузер не поддерживает все функции, но он проще в использовании и надёжнее.
Зачем приложению нужен доступ к буферу обмена?
Как разработчик вы знаете, как работает буфер обмена, и регулярно используете следующие сочетания клавиш:
- Ctrl| Cmd+ C копировать.
- Ctrl| Cmd+ X вырезать.
- А также Ctrl| Cmd+ V вставить.
Те, у кого меньше опыта работы с компьютером, необязательно будут обладать этими знаниями. Они также могут использовать устройство с сенсорным экраном, на котором недоступны сочетания клавиш. Предлагая простые в использовании значки вырезания и вставки, может быть полезно.
Кроме того, вы можете изменить содержимое после завершения действия с буфером обмена, например, добавления или удаления форматирования.
Доступ к буферу обмена опасен!
Программный доступ к буферу обмена вызывает несколько проблем с безопасностью:
API доступен только для активной вкладки браузера (не для фоновых вкладок) и может быть запущен только при взаимодействии с пользователем, например, щелчком. При необходимости пользователю будет предложено разрешение на чтение данных из буфера обмена:
Это предупреждение отображается, когда страница впервые запрашивает доступ к буферу обмена. Это не должно вызывать никаких проблем, учитывая, что API асинхронный и возвращает обещание. А также можно проверить и запросить статус с помощью API разрешений.
Обнаружение функции API буфера обмена
API буфера обмена доступен, когда navigator.clipboardвозвращает правдивый результат. Например:
Однако это не гарантирует, что браузер поддерживает все функции, поэтому необходимо выполнить дополнительные проверки. Например, на момент написания Chrome поддерживает метод API readText (), а Firefox — нет.
Копировать и вставить текст
Копирование и вставка текста будет полезным вариантом в большинстве приложений. API очень прост:
Вам потребуется значительно больше кода для обнаружения поддержки и обработки ошибок.
В этом примере реализуется копирование текста, когда к data-copyатрибуту добавляется любой элемент HTML, например кнопка. Вы можете установить это значение на одно из следующих значений:
Кнопка вставки текста очень похожа, за исключением того, что она определяет data-pasteатрибут, который должен указывать на узел DOM:
Копировать и вставлять данные
Clipboard API, readText()и writeText()варианта удобства для более общих read()и write()методов. У них меньше поддержки браузером, но они могут копировать и вставлять любые типы данных, например двоичные изображения.
Для копирования требуются данные большого двоичного объекта, обычно возвращаемые методом fetch()или canvas.toBlob(). Это передаётся ClipboardItemконструктору, чтобы его можно было записать в буфер обмена:
Вставка более сложна, поскольку ClipboardItemможно возвращать несколько объектов с разными типами содержимого. Поэтому необходимо перебирать каждый тип, пока не будет найден полезный формат. Например:
Это работает аналогично текстовой демонстрации, в этой копии и вставить кнопки должны указывать на элементы DOM, используя селектор CSS в data-copyblobи data-pasteblobатрибутов. Например:
Попробуйте скопировать данные изображения из графического приложения, затем используйте кнопку вставки.
Вырезать, скопировать и вставить события
События cut, copyи pasteсрабатывают всякий раз, когда пользователь инициирует действие с буфером обмена в браузере — обычно с помощью контекстного меню или сочетаний клавиш, упомянутых выше. Это поддерживается в большинстве браузеров, и функции обработчика могут перехватывать события для внесения изменений с использованием clipboardDataобъекта, переданного в качестве параметра.
Следующая функция переводит весь вырезанный или скопированный текст в верхний регистр. Обратите внимание, что это e.preventDefault() останавливает действие вырезания / копирования по умолчанию, которое переопределит его:
Следующий код прикрепляет обработчик вставки к определенному
Заключение
API буфера обмена является новым, но имеет разумную поддержку браузера и кажется более надежным, чем старый document.execCommand()вариант.
Лучше всего добавлять его как прогрессивное усовершенствование, поэтому функции вырезания, копирования и вставки будут реализованы в вашем приложении только тогда, когда они доступны.
Здесь задаем значение виде текста, чтоб по клику можно занести в буфер обмена
Ничего особенного, чтобы увидеть здесь тег p с каким-то фиктивным контентом и button с функцией onclick. То здесь должны поставить метку id на свой тег p, чтобы иметь возможность настроить target на нее с помощью этой функции.
Это JavaScript для копирования в буфер обмена
Теперь давайте напишем нашу функцию, а затем пройдемся по каждой строке кода:
function copyToClipboard() <
const str = document.getElementById('punkt-kopirovaniye').innerText;
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
>
На этом вся установка, но нужно подметить, что оформление здесь нет, что можете уже сами поставить, это сделать красивую кнопку, а также форму под описание, которое изначально видно.
Давайте рассмотрим код построчно:
Во-первых, мы получаем содержимое целевого элемента, где можете пропустить эту строку, если вы уже передаете строку своей функции. В этом случае контент получен из определенного элемента страницы, поэтому нам нужно получить его по клику.
Затем мы приступаем к созданию нового textarea элемента и устанавливаем некоторые свойства для него:
1. Устанавливаем значение в соответствии с содержанием нашей строки.
2. Устанавливаем readonly, под абсолютное положение и оставляем -9999px только для того, чтобы сделать наш пользователь textarea невидимым изначально.
Затем мы добавляем элемент, чтобы сразу после этого мы могли обратиться select() к нему. Если вы внедряете функцию копирования в буфер обмена, например в поле комментария в котором возможно уже используется textarea элемент, то можете обратиться select() к нему напрямую, не создавая новый элемент DOM, как мы делаем в этом руководстве.
Читайте также: