Копировать html при клике

Копирование текста на сайте с помощью Clipboard.js

Clipboard.js – мини плагин для копирования текста с сайта в буфер обмена, который не использует flash и JQuery.

Подключение и использование

Достаточно подключить JS-скрипт:

И связать кнопку и копируемое поле атрибутом data-clipboard-target :

Копирование из текстового поля

var clipboard = new ClipboardJS('#button-copy', < text: function(trigger) < return document.getElementById('input').value; >>); clipboard.on('success', function(e)< alert('Текст скопирован: ' + e.text); e.trigger.classList.add('btn-success'); setTimeout(function()< e.trigger.classList.remove('btn-success'); >, 3000); >); clipboard.on('error', function(e)< alert('Ошибка копирования'); >);

Пример:

Копирование из textarea

var clipboard = new ClipboardJS('#button-copy', < text: function(trigger) < return document.getElementById('input').value; >>); clipboard.on('success', function(e)< alert('Текст скопирован: ' + e.text); e.trigger.classList.add('btn-success'); setTimeout(function()< e.trigger.classList.remove('btn-success'); >, 3000); >); clipboard.on('error', function(e)< alert('Ошибка копирования'); >);

Пример:

Копирование содержимого блока

 
Proin blandit magna eu tempus ullamcorper.
 
Sed porta justo sed nibh elementum condimentum.
 
Quisque non eros sit amet elit commodo maximus eget a eros.
 
 Копировать 

var clipboard = new ClipboardJS('#button-copy', < text: function(trigger) < return document.getElementById('box').innerText.replace(/\n+/g,'\n'); >>); clipboard.on('success', function(e)< alert('Текст скопирован: ' + e.text); e.trigger.classList.add('btn-success'); setTimeout(function()< e.trigger.classList.remove('btn-success'); >, 3000); >); clipboard.on('error', function(e)< alert('Ошибка копирования'); >);

Пример:

Копирование выделенного текста

 
Proin blandit magna eu tempus ullamcorper.
 
Sed porta justo sed nibh elementum condimentum.
 
Quisque non eros sit amet elit commodo maximus eget a eros.
 
 
Копировать выделенное 

var clipboard = new ClipboardJS('#button-copy', < text: function(trigger) < var select = window.getSelection(); return select.toString(); >>); clipboard.on('success', function(e)< alert('Текст скопирован: ' + e.text); e.trigger.classList.add('btn-success'); setTimeout(function()< e.trigger.classList.remove('btn-success'); >, 3000); >); clipboard.on('error', function(e)< alert('Ошибка копирования'); >);

Пример:

Копирование текста из атрибута элемента

 
Копировать текст из атрибута 

var clipboard = new ClipboardJS('#button-copy', < text: function(trigger) < return trigger.getAttribute('data-clipboard-text'); >>); clipboard.on('success', function(e)< alert('Текст скопирован: ' + e.text); e.trigger.classList.add('btn-success'); setTimeout(function()< e.trigger.classList.remove('btn-success'); >, 3000); >); clipboard.on('error', function(e)< alert('Ошибка копирования'); >);

Источник

Скопировать текст в буфер обмена нажатием на кнопку

Задача простая — копировать текст из какого-то блока нажатием кнопки, например, это может быть код купона или ссылка на статью в конце самой статьи. Согласитесь — довольно таки удобно, вместо выделения и копирования просто нажать одну кнопку и нужный текст уже в буфере обмена.

Самый простой и примитивный HTML для примера:

 
 Чтобы не загружать мозг лишним кодом, в CSS будет только одно правило для скрытия сообщения об удачном копировании:

Ну и самая главная часть — скрипт, который выполнит всю работу:

$(function() < // copy content to clipboard function copyToClipboard(element) < var $temp = $(""); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); > // copy coupone code to clipboard $(".coupon-btn").on("click", function() < copyToClipboard("#coupon-field"); $(".coupon-alert").fadeIn("slow"); >); >);

Думаю, сильно подробно разбирать код нет смысла. Но в двух словах:

Функция copyToClipboard(element) скопирует в буфер содержимое заданного блока.

Копирование произойдет при нажатии на кнопку «.coupon-btn» .

copyToClipboard(«#coupon-field») — вызываем функцию copyToClipboard(element) и указываем, что нужно скопировать содержимое блока #coupon-field .

$(«.coupon-alert»).fadeIn(«slow»); — после копирования показываем сообщение, что что-то произошло и содержимое блока скопировано.

Ниже рабочий пример, в котором так же добавлено поле, чтобы вставить в него содержимое из буфера и проверить работоспособность кода:

Простая валидация email с помощью javaScript. Суть в том, чтобы не дать отправить форму, пока…

Рассмотрим 2 наиболее часто применяющихся примера. Для обоих примеров будет общий HTML: И общие правила…

Простой пример, как убрать стрелки в поле input[type=»number»] с помощью CSS: Важное дополнение: по прежнему…

Часто в мобильной версии сайта используется кнопка типа «бургера» для вызова основного меню сайта. На…

Источник

Копирование текста в буфер обмена по клику

Иногда бывает нужно поставить кнопку, нажав на которую, пользователь мог бы занести в буфер обмена какой-то текст.

В данном примере этот текст берется не из полей формы, а со страницы.

Пример:

При нажатии на соответствующую кнопку ниже скопируется этот текст

Или этот, если нажать другую.

HTML:

При нажатии на соответствующую кнопку ниже скопируется этот текст.

Или этот, если нажать другую.

JS:

Подключаем библиотеку jQuery и:

Копирование происходит через функцию copytext(element) , например:

Если в копируемом тексте не нужны переносы строк, то вместо:

• Опубликовано: 14.02.2019 / Обновлено: 11.09.2020
• Рубрики: Тексты, ссылки и кнопки — простые решения
• Метки: jQuery
• 56241 просмотр

Смотрите также:

Кнопка Play / Pause

Анимированная кнопка воспроизведения / паузы на jQuery

Обтекание картинки текстом

CSS-свойство shape-outside для обтекания текстом изображения на прозрачном фоне

Текст с исчезающими буквами

Вариант оформления заголовка с исчезающими и появляющимися буквами

Добавить комментарий:

Комментарии:

Здравствуйте. Подскажите пожалуйста. Как сделать так чтобы иконки которые на сайте, при клике на них, копировались в буфер обмена, спасибо?!

С картинками там все посложнее, поищите в интернете, например: Copy Image to Clipboard from Browser in Javascript, может что-то получится.
Я пару вариантов попробовал, не работают они, скорее всего из-за проблем с безопастностью.

function copytext(el) < var $tmp = $(""); $("body").append($tmp); $tmp.val($(el).text() + window.location.href).select(); document.execCommand("copy"); $tmp.remove(); >

Спасибо большое. Ссылка проставляется )
Если не трудно, скажите как еще сделать, чтобы при клике по кнопке появлялось сообщение, что текст скопирован. Пробовал ваше решение, предложенное для Ильдара — не сработало. Заранее спасибо.

Подскажите пожалуйста, как с наименьшим количеством кода показать пользователю, что текст скопировался? Может в поле на 0,5 секунд вывести текст «Скопировано», а через 0,5 секунд вернуть что было. Это нормальное решение или могут возникнуть проблемы?

В таком случае приходится вручную прописывать span с текстом «Скопировано», хотелось бы, чтобы функция создала такой span и вывела её над точкой, в которой был клик.

$('.copy').on('click', function(e) < $('.message').css(< "top": e.pageY, "left": e.pageX >) $('.message').fadeIn('fast').delay(800).fadeOut('slow'); >);

Решил менять текст на кнопке, но не могу понять как вернуть текст «Скопировать» на кнопке через 500 миллисекунд:

setTimeout("$('#copyButton').attr('value', 'Скопировать')", 500);

Здравствуйте.
Спасибо за код, работает, копирует. Но у меня даже с textarea копирует одной строкой. Может быть, есть ещё условия, чтобы соблюдался перенос строк?

Блин, всю голову поломал, а забыл, что мобильный браузер не умеет обновляться через Ctrl+F5. И пока я не почистил историю и не перезапустил браузер, ничего не работало. Сейчас всё отлично, извините за беспокойство.

Новая проблемка нарисовалась, при копировании кода, все превращается в «кашу» форматирование не сохраняется. Неудобно потом разгребать. Как решить проблему не пойму. Может есть идеи в кого?

Приветствую. Такая ситуация возникла: нужно дать посетителю возможность скопировать какой-то код (хтмл, цсс, скрипт) но при вставке кода ОН СРАБАТЫВАЕТ, т.е вместо например кода и стилей (которые должен скопировать посетитель) он копирует конечный результат, но не сам код. Вопрос: как вставить именно код (текстом) и дать возможность его скопировать? Пробовал закомментировать код через

А как выглядет конечный результат, который копируется?
И лучше конечно поглядеть визуально, как у вас что работает

И еще такой вопрос. Когда в тексте есть эмодзи, то они не копируются. Как сделать, чтобы с эмодзи все копировалось? Очень прошу помочь!

Нормально они копируются, только куда их потом втыкать вопрос.
Если в блокнотик, например, то он отображает их не все, ровно как и хром.

https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

скопировал и сделал как на примере. не работает в итоге. может я что-то делаю не так. хотя все просто копирую как у автора. жаль то не вышло. буду искать еще.

А как можно отключить копирование в буфер обмена? Например, как на этой странице про копирование в буфер обмена Как будет выглядеть подобный скрипт?

Это чтобы контент не копипастили? 🙂
Ну чтобы прям отключить, это я думаю врядли возможно, но похимичить что нибудь можно.
Первый делом нужно отключить правую кнопку мыши, а потом, запретить, например, выделение текста или повесить другое событие на CTRL + C

$(document).keydown(function(e) < if (e.ctrlKey && e.keyCode === 67) < var $tmp = $(""); $("body").append($tmp); $tmp.val("Скопировали не то, что выделили").select(); document.execCommand("copy"); $tmp.remove(); > >);

function copytext(el) < var $tmp = $(""); $("body").append($tmp); // Вставляем временную переменную с полем для ввода $tmp.val($(el).text()).select(); // Вставляем в это поле данные нужного элемента и выделяем document.execCommand("copy"); // Копируем эти данные $tmp.remove(); // Удаляем временную переменную >

Спасибо за ответ var $tmp = $(««); <br />я понимаю эту строку, как поиск тега <textarea> <br />у меня на странице данного тега нет <br />такой строкой я могу любой тег в переменную положить? select() — это выделить текст? Друг гугол не отвечает на этот вопрос) document.execCommand(«copy»); — как этот метод понимает, что нужно скопировать наши данные?

Метод select() используется с элементом (с текстовым типом type = «text») и элементом .
Поэтому нам и приходится создать такой временный элемент, воткнуть туда текст из нужного нам элемента, потом выделить, скопировать в буфер и удалить все это

У меня копирование получается на ноутбуке, а на телефоне в safari не как не получается. Что можно сделать? Спасибо.

Ну это уже от браузера зависит.
Читать нужно именно про мобильные.
Скорее всего не дает он копировать из соображения безопасности какой то.

Источник

How to Copy Text to the Clipboard with JavaScript

Joel Olawanle

When you’re building advanced web pages and applications, you’ll sometimes want to add the copy feature. This lets your users simply click a button or icon to copy text rather than highlighting the text and clicking a couple of buttons on the keyboard.

This feature is mostly used when someone needs to copy an activation code, recovery key, code snippet, and so on. You can also add functionalities like an alert or text on the screen (which could be a modal) to inform the user that the text has been copied to their clipboard.

Previously you would’ve handled this with the document.execCommand() command, but that is deprecated (no longer recommended). You can now use the Clipboard API, which allows you to respond to clipboard commands (cut, copy, and paste) and asynchronously read from and write to the system clipboard.

In this article, you will learn how to write (copy) text and images to the clipboard with the Clipboard API.

In case you are in a rush, here is the code:

Hello World
 Copy!  

If you are not in a rush, let’s understand more about the Clipboard API and see how this works with a demo project.

How to Check the Browser’s Permissions

It is important to know that the Clipboard API is only supported for pages served over HTTPS. You should also check for browser permissions before attempting to write to the clipboard to verify if you have the write access. You can do this with the navigator.permissions query:

navigator.permissions.query(< name: "write-on-clipboard" >).then((result) => < if (result.state == "granted" || result.state == "prompt") < alert("Write access granted!"); >>); 

How to Copy Text to the Clipboard

To copy text with the new Clipboard API, you will use the asynchronous writeText() method. This method accepts only one parameter — the text to copy to your clipboard. This can be a string, a template literal holding variables and other strings, or a variable used to hold a string.

Since this method is asynchronous, it returns a promise. This promise is resolved if the clipboard has been updated successfully, and is rejected otherwise:

navigator.clipboard.writeText("This is the text to be copied").then(() => < console.log('Content copied to clipboard'); /* Resolved - text copied to clipboard successfully */ >,() => < console.error('Failed to copy'); /* Rejected - text failed to copy to the clipboard */ >); 

You can also use async/await alongside try/catch:

async function copyContent() < try < await navigator.clipboard.writeText('This is the text to be copied'); console.log('Content copied to clipboard'); /* Resolved - text copied to clipboard successfully */ >catch (err) < console.error('Failed to copy: ', err); /* Rejected - text failed to copy to the clipboard */ >> 

Copy text to clipboard example

Here is a demo showing how it works using a real-life example. In this example, we’re fetching quotes from a public quote API. Then when you click the copy icon, the quote and its author get copied, showing that you can adjust what you copy into the writeText() method.

See the Pen copy text JS by Olawanle Joel (@olawanlejoel) on CodePen.

Wrapping Up

In this article, you have learned how to copy text to the clipboard with JavaScript using the Clipboard API without having to think outside the box or install any JavaScript library.

Embark on a journey of learning! Browse 200+ expert articles on web development. Check out my blog for more captivating content from me.

Источник

Копирование текста из div в буфер обмена при клике на кнопку

Часто возникает задача, когда требуется скопировать текст из определенного элемента на веб-странице в буфер обмена пользователя. Например, есть div с текстом и кнопка. При клике на кнопку текст из div должен копироваться в буфер обмена, и этот текст должен быть доступен для вставки в другое место.

Текст для копирования
 Копировать текст 

В этом случае можно использовать метод execCommand(«copy») объекта document . Однако стоит учесть, что этот метод устарел и может быть удален из браузеров в будущем.

document.querySelector("#copyButton").addEventListener("click", function() < var range = document.createRange(); range.selectNode(document.querySelector("#myDiv")); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); document.execCommand("copy"); window.getSelection().removeAllRanges(); >);

Более современным и предпочтительным способом является использование Clipboard API. Этот API предоставляет метод writeText() , который можно использовать для копирования текста в буфер обмена.

document.querySelector("#copyButton").addEventListener("click", function() < navigator.clipboard.writeText(document.querySelector("#myDiv").innerText).then(function() < console.log('Text copied to clipboard'); >).catch(function(error) < console.error('Error:', error); >); >);

Оба этих метода копируют текст в буфер обмена, и после их выполнения текст можно вставить в любое место, нажав сочетание клавиш Ctrl+V или команду «Вставить» в контекстном меню.

Источник