Скопировать текст в буфер обмена нажатием на кнопку
Задача простая — копировать текст из какого-то блока нажатием кнопки, например, это может быть код купона или ссылка на статью в конце самой статьи. Согласитесь — довольно таки удобно, вместо выделения и копирования просто нажать одну кнопку и нужный текст уже в буфере обмена.
Самый простой и примитивный HTML для примера:
Чтобы не загружать мозг лишним кодом, в CSS будет только одно правило для скрытия сообщения об удачном копировании:
.coupon-alert
Ну и самая главная часть — скрипт, который выполнит всю работу:
$(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: Важное дополнение: по прежнему…
Часто в мобильной версии сайта используется кнопка типа «бургера» для вызова основного меню сайта. На…
Копирование текста в буфер обмена
Здесь вы узнаете, как скопировать текст в буфер обмена при помощи JavaScript.
Нажмите на кнопку, чтобы скопировать текст из текстового поля.
Копировать в буфер обмена Копировать текст
Копируем текст в буфер обмена
Шаг 1) Добавляем HTML:
Шаг 2) Добавляем JavaScript:
function myFunction() < /* Находим текстовое поле */ var copyText = document.getElementById("myInput"); /* Выбираем текстовое поле */ copyText.select(); copyText.setSelectionRange(0, 99999); /* Для мобильных устройств */ /* Копируем текст из текстового поля */ navigator.clipboard.writeText(copyText.value); /* Выводим скопированный текст в диалоговом окне */ alert("Скопированный текст: " + copyText.value); >
Вывод скопированного текста в подсказке
.tooltip < position: relative; display: inline-block; >.tooltip .tooltiptext < visibility: hidden; width: 140px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -75px; opacity: 0; transition: opacity 0.3s; >.tooltip .tooltiptext::after < content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; >.tooltip:hover .tooltiptext
Кнопка «Скопировать в буфер» в html письме
Доброго времени суток! Задача: Есть html шаблон письма. Требуется сделать ссылку «Копировать в буфер», при нажатии на которую будет копироваться ссылка, находящаяся в теле письма, в буфер обмена. Почтовая программа Outlook 2010. Возможно ли такое в html-письмах?
- В десктопном приложении Облака Mail.Ru появилась возможность делать и редактировать скриншоты
- Пользователи мобильной Почты Mail.Ru смогут отправлять письма самим себе, не открывая приложение
- Яндекс официально представил волшебную кнопку в Яндекс.Почте
На сайте с 09.02.2012
10 марта 2013, 10:40
На чистом хтмл такого не сделать. Нужно использовать php.
Мне нужны деньги.
На сайте с 24.01.2008
10 марта 2013, 11:14
Tenarius:
На чистом хтмл такого не сделать. Нужно использовать php.
Какая связь между Оутлуком и ПХП?
На сайте с 09.02.2012
10 марта 2013, 11:20
Милованов Ю.С:
Какая связь между Оутлуком и ПХП?
А какая вообще разница, что за почтовый клиент, если суть в том, чтобы нажать на ссылку? Пользователь кликает на ссылку и попадает на генереную страницу, где ему определенным образом осуществляется выборка по контенту (если она вообще нужна) и потом выбраный контент копируется в буфер. Можно js например использовать для этого также.
На сайте с 25.11.2006
10 марта 2013, 11:22
Возможно ли такое в html-письмах?
Нет. Такого нельзя сделать.
✅ Трастовых площадок под размещение статей и ссылок. Опыт 15 лет! ( https://searchengines.guru/ru/forum/675690 ) ⭐ Купить вечные трастовые ссылки для сайта ( https://getmanylinks.ru/?srh ) ⭐ Новый аналог AllSubbmitter (заполнение форм) https://getmanylinks.ru/getmanysubmits.html (Бесплатное демо)
На сайте с 09.03.2013
10 марта 2013, 11:40
Пробовал вставлять js-код прямо в html шаблон письма. Работает (шаблон) только в IE. А вот если открыть такое входящее письмо в Outlook, то при клике на ссылку «Скопировать в буфер» открывается окно IE и вылезает ошибка: «Не удалось загрузить . Неопознанная ошибка».
function ClipBoard(meintext)
<
result = copyToClipboard(meintext);
if (result) <
alert(‘Ссылка скопирована в буфер обмена’);
>
else <
alert(‘К сожалению, Ваш браузер не позволяет работать с буфером обмена’);
>
>
function copyToClipboard(content) <
if (window.clipboardData && window.clipboardData.setData) <
window.clipboardData.setData(«Text», content);
return true;
>
else <
try <
netscape.security.PrivilegeManager.enablePrivilege(«UniversalXPConnect»);
>
catch (e) <
return false;
>
var clipboard = Components.classes[«@mozilla.org/widget/clipboard;1»].getService();
if (clipboard) <
clipboard = clipboard.QueryInterface(Components.interfaces.nsIClipboard);
>
var transferable = Components.classes[«@mozilla.org/widget/transferable;1»].createInstance();
if (transferable) <
transferable = transferable.QueryInterface(Components.interfaces.nsITransferable);
>
if (clipboard && transferable) <
// тип передаваемых данных transferable.addDataFlavor(«text/unicode»);
var textObj = new Object();
var textObj = Components.classes[«@mozilla.org/supports-string;1»].createInstance(Components.interfaces.nsISupportsString);
if (textObj) <
textObj.data = content;
// Упаковываем данные в контейнер
transferable.setTransferData(«text/unicode», textObj, content.length*2);
var clipid=Components.interfaces.nsIClipboard;
clipboard.setData(transferable,null,clipid.kGlobalClipboard);
return true;
>
>
return false;
>
>
LEOnidUKG:
Нет. Такого нельзя сделать.
Поэкспериментировав, перепробовав разные варианты, тоже прихожу к такому же выводу ((
Как сделать — Копирование текста в буфер обмена
Узнать, как скопировать текст в буфер обмена с помощью JavaScript.
Нажмите на кнопку, чтобы скопировать текст из текстового поля.
Копировать в буфер Скопировать текст
Копирование текста в буфер обмена
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить JavaScript:
Пример
function myFunction() <
/* Получить текстовое поле */
var copyText = document.getElementById(«myInput»);
/* Выделите текстовое поле */
copyText.select();
copyText.setSelectionRange(0, 99999); /* Для мобильных устройств */
/* Скопируйте текст внутри текстового поля */
document.execCommand(«copy»);
/* Оповещение скопированного текста */
alert(«Скопировал текст: » + copyText.value);
>
Примечание: Метод document.execCommand() метод не поддерживается в IE8 и более ранних версиях.
Отображение скопированного текста в подсказке
Пример
.tooltip <
position: relative;
display: inline-block;
>
.tooltip .tooltiptext visibility: hidden;
width: 190px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
>
.tooltip .tooltiptext::after content: «»;
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
>
.tooltip:hover .tooltiptext visibility: visible;
opacity: 1;
>
Мы только что запустили
SchoolsW3 видео
ВЫБОР ЦВЕТА
курс сегодня!
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
ТОП Учебники
ТОП Справочники
ТОП Примеры
Получить сертификат
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.