Пример:
Текст 1
При нажатии на соответствующую кнопку ниже скопируется этот текст
Текст 2
Или этот, если нажать другую.
HTML:
|
1 2 3 4 5 6 7 8 |
<div id="text1"> <p><b>Текст 1</b></p> <p>При нажатии на соответствующую кнопку ниже скопируется этот текст.</p> </div> <div id="text2"> <p><b>Текст 2</b></p> <p>Или этот, если нажать другую.</p> </div> |
JS:
Подключаем библиотеку jQuery и:
|
1 2 3 4 5 6 7 |
function copytext(el) { var $tmp = $("<textarea>"); $("body").append($tmp); $tmp.val($(el).text()).select(); document.execCommand("copy"); $tmp.remove(); } |
Копирование происходит через функцию copytext(element), например:
<button onclick="copytext('#text1')">Добавить в буфер</button>
Если в копируемом тексте не нужны переносы строк, то вместо:
var $tmp = $("<textarea>");
нужно написать:
var $tmp = $("<input>");
Добрый день!
Спасибо за статью - очень пригодилась для копирования нескольких строк текста имеющих одинаковый класс.
Но копируется без символов перевода строки, все строки в одной строке. В то время как, если выделить текст и скопировать средством браузера - каждая строка заканчивается символом перевода строки.
Что нужно добавить в код, чтобы каждая строка была с новой строчки?
var $tmp = $("<textarea>");Должна с переносами копировать, но лучше бы конечно ваш результат посмотреть.
Не могу отправить код страницы - пишет, что введены запрещенные данные
Мне нужно у вас посмотреть как работает и что не так, или в песочнице.
Можно посмотреть здесь - zse4.ru
У вас внутри копируемых элементов нет переноса.
Не проще ли все обернуть?
<div class="allline"> <div class="line">Строка 1</div> <div class="line">Строка 2</div> </div> <button onclick="copytext('.allline')">Добавить в буфер </button>или можно
или автоматически добавить этот перенос
$('.line').each(function() { $(this).text($(this).text() + '\n'); });Большое спасибо!
1-й вариант работает.
2-й - не подходит, т.к. HTML-код строк генерит очень сложный Javascipt
3-й - не понял куда вставить в ваш скрипт копирования.
В любое удобное место, этот код не имеет отношения к копированию.
Он берет текст в элементе line и добавляет к нему перенос, т.е. получится тоже самое, что в варианте 2.
Большое спасибо за помощь!
Проблема в том, что строки генерируются в автоматическом режиме, в результате действий пользователя на странице. Поэтому копировать нужно только когда пользователь закончил свои действия.
Сделал две кнопки для пользователя:
1. Проставляет переносы после каждой строки.
2. Копирует строки в буфер.
Здравствуйте. Подскажите пожалуйста. Как сделать так чтобы иконки которые на сайте, при клике на них, копировались в буфер обмена, спасибо?!
С картинками там все посложнее, поищите в интернете, например: Copy Image to Clipboard from Browser in Javascript, может что-то получится.
Я пару вариантов попробовал, не работают они, скорее всего из-за проблем с безопастностью.
Спасибо, буду юзать)
Здраствуйте, не могу понять как заставить чтобы копировал с
<button onclick="copytext('#blog')">Добавить в буфер</button>И функция:
function copytext(el) { $(el).select(); document.execCommand("copy"); }Скажите, а как сделать так, чтобы скопировался не только текст, но еще и урл текущей страницы?
Вам нужно просто добавить ссылку, или именно с целью защиты от копирования?
Если добавить ссылку, то
function copytext(el) { var $tmp = $("<textarea>"); $("body").append($tmp); $tmp.val($(el).text() + window.location.href).select(); document.execCommand("copy"); $tmp.remove(); }Если именно как защита от копирования, то посмотрите тему зaщитa oт кoпиpoвaния
Спасибо большое. Ссылка проставляется )
Если не трудно, скажите как еще сделать, чтобы при клике по кнопке появлялось сообщение, что текст скопирован. Пробовал ваше решение, предложенное для Ильдара - не сработало. Заранее спасибо.
Добрый день, функция в конце добавляет 8 пробелов, как пофиксить?
разобрался))
Как?
Подскажите пожалуйста, как с наименьшим количеством кода показать пользователю, что текст скопировался? Может в поле на 0,5 секунд вывести текст "Скопировано", а через 0,5 секунд вернуть что было. Это нормальное решение или могут возникнуть проблемы?
Можно повесить сообщение над/под кнопку "копировать", а по клику на ней показывать, например так:
$('.message').fadeIn().fadeOut('slow');В таком случае приходится вручную прописывать span с текстом "Скопировано", хотелось бы, чтобы функция создала такой span и вывела её над точкой, в которой был клик.
Можно как-нибудь так:
CSS
.message { position: absolute; display: none; }HTML в подвал перед боди закрывающим:
jQuery:
$('.copy').on('click', function(e) { $('.message').css({ "top": e.pageY, "left": e.pageX }) $('.message').fadeIn('fast').delay(800).fadeOut('slow'); });Но лучше, и красивее будет, просто найти кнопку анимированную, например:
ссылка
Решил менять текст на кнопке, но не могу понять как вернуть текст "Скопировать" на кнопке через 500 миллисекунд:
function copytext(el) { $(el).select(); document.execCommand("copy"); $('#copyButton').fadeOut(100).attr('value', 'Скопировано!').fadeIn(100); }Ниже добавьте просто:
setTimeout("$('#copyButton').attr('value', 'Скопировать')", 500);Это код нужно вставить в отельный скрипт?
Здравствуйте.
Спасибо за код, работает, копирует. Но у меня даже с textarea копирует одной строкой. Может быть, есть ещё условия, чтобы соблюдался перенос строк?
Тут скорее всего вопрос в другом, что копируется а не как.
Это одна строка:
И это:
А это две строки
Хотя на странице такой код будет выглядеть наоборот
Блин, всю голову поломал, а забыл, что мобильный браузер не умеет обновляться через Ctrl+F5. И пока я не почистил историю и не перезапустил браузер, ничего не работало. Сейчас всё отлично, извините за беспокойство.
Новая проблемка нарисовалась, при копировании кода, все превращается в "кашу" форматирование не сохраняется... Неудобно потом разгребать... Как решить проблему не пойму. Может есть идеи в кого?
От это я балда, только сейчас досмотрелся что в коде прописан input
Что это означает? И в итоги у вас получилось избавиться от каши?
В input нет переноса строк
Спасибо)) значить буду искать другой метод копировать в буфер, что бы при вставки получался список.
А в textarea есть 🙂
В самой теме про это написано
Приветствую. Такая ситуация возникла: нужно дать посетителю возможность скопировать какой-то код (хтмл, цсс, скрипт) но при вставке кода ОН СРАБАТЫВАЕТ, т.е вместо например кода и стилей (которые должен скопировать посетитель) он копирует конечный результат, но не сам код.
Вопрос: как вставить именно код (текстом) и дать возможность его скопировать? Пробовал закомментировать код через <!-- но тогда копируется пустота ... Печально, не могу ничего придумать, может что подскажете? Спс.
А как выглядет конечный результат, который копируется?
И лучше конечно поглядеть визуально, как у вас что работает
Сам написал вопрос - сам покопался и решил проблемку Решил с помощью <xmp> и комментирования через <!--- так что все в порядке, а за кодик спасибо, реально пригодился
Спасибо а как копировать текст 1 и текст 2 одной кнопкой как сделать?
Использовать вместо ID одинаковый для копируемого текста класс.
И еще такой вопрос. Когда в тексте есть эмодзи, то они не копируются. Как сделать, чтобы с эмодзи все копировалось? Очень прошу помочь!
Нормально они копируются, только куда их потом втыкать вопрос.
Если в блокнотик, например, то он отображает их не все, ровно как и хром.
Автор, напиши что библиотеку еще подключить надо, чтобы народ был в курсе)
Эту например
Написал 🙂
скопировал и сделал как на примере. не работает в итоге. может я что-то делаю не так. хотя все просто копирую как у автора. жаль то не вышло. буду искать еще.
не работает
А как можно отключить копирование в буфер обмена? Например, как на этой странице про копирование в буфер обмена Как будет выглядеть подобный скрипт?
Это чтобы контент не копипастили? 🙂
Ну чтобы прям отключить, это я думаю врядли возможно, но похимичить что нибудь можно.
Первый делом нужно отключить правую кнопку мыши, а потом, запретить, например, выделение текста или повесить другое событие на CTRL + C
$(document).keydown(function(e) { if (e.ctrlKey && e.keyCode === 67) { var $tmp = $("<input>"); $("body").append($tmp); $tmp.val("Скопировали не то, что выделили").select(); document.execCommand("copy"); $tmp.remove(); } });Большое спасибо, очень помогло!
Доброго дня.
Если возможно, объясните пожалуйста каждую строку кода js, буду очень вам благодарен.
Как то так
function copytext(el) { var $tmp = $("<textarea>"); $("body").append($tmp); // Вставляем временную переменную с полем для ввода $tmp.val($(el).text()).select(); // Вставляем в это поле данные нужного элемента и выделяем document.execCommand("copy"); // Копируем эти данные $tmp.remove(); // Удаляем временную переменную }Спасибо за ответ
var $tmp = $("<textarea>");
я понимаю эту строку, как поиск тега <textarea>
у меня на странице данного тега нет
такой строкой я могу любой тег в переменную положить?
select() - это выделить текст? Друг гугол не отвечает на этот вопрос)
document.execCommand("copy"); - как этот метод понимает, что нужно скопировать наши данные?
Нет, это создание переменной с ней (потом ее и вставляем)
Чтобы не вставлять 3 раза $("<textarea>")
Да, это выделяет потом то что создали и куда вставили.
document.execCommand("copy");А это копирует то что выделили
Метод select() используется с элементом <input> (с текстовым типом type = "text") и элементом <textarea>.
Поэтому нам и приходится создать такой временный элемент, воткнуть туда текст из нужного нам элемента, потом выделить, скопировать в буфер и удалить все это
А как убрать расстояние между двумя кнопками?
какими ?
У меня копирование получается на ноутбуке, а на телефоне в safari не как не получается. Что можно сделать? Спасибо!!!
Ну это уже от браузера зависит.
Читать нужно именно про мобильные.
Скорее всего не дает он копировать из соображения безопасности какой то.