Копируйте/помещайте текст в буфер обмена с помощью FireFox, Safari и Chrome.
-
02-07-2019 - |
Вопрос
В Internet Explorer я могу использовать объект clipboardData для доступа к буферу обмена.Как я могу это сделать в FireFox, Safari и/или Chrome?
Решение
Теперь есть способ легко сделать это в большинстве современных браузеров, используя
document.execCommand('copy');
Это скопирует выделенный в данный момент текст.Вы можете выбрать текстовую область или поле ввода, используя
document.getElementById('myText').select();
Чтобы незаметно скопировать текст, вы можете быстро создать textArea, изменить текст в поле, выделить его, скопировать, а затем удалить textArea.В большинстве случаев эта текстовая область даже не мигает на экране.
По соображениям безопасности браузеры позволят вам копировать только в том случае, если пользователь предпримет какое-либо действие (т.нажатие кнопки).Один из способов сделать это — добавить событие onClick к кнопке html, которая вызывает метод, копирующий текст.
Полный пример будет выглядеть так
<html>
<head>
<title>copy test</title>
</head>
<body>
<button onclick="copier()">Copy</button>
<textarea id="myText">Copy me PLEASE!!!</textarea>
<script>
function copier(){
document.getElementById('myText').select();
document.execCommand('copy');
}
</script>
</body>
</html>
Другие советы
По соображениям безопасности Firefox не позволяет помещать текст в буфер обмена.Однако существует обходной путь с использованием Flash.
function copyIntoClipboard(text) {
var flashId = 'flashId-HKxmj5';
/* Replace this with your clipboard.swf location */
var clipboardSWF = 'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';
if(!document.getElementById(flashId)) {
var div = document.createElement('div');
div.id = flashId;
document.body.appendChild(div);
}
document.getElementById(flashId).innerHTML = '';
var content = '<embed src="' +
clipboardSWF +
'" FlashVars="clipboard=' + encodeURIComponent(text) +
'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
document.getElementById(flashId).innerHTML = content;
}
Единственным недостатком является то, что для этого необходимо включить Flash.
источник на данный момент мертв: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/ (и это тоже Кеш Google)
Онлайн-таблицы перехватывают события Ctrl+C, Ctrl+V и передают фокус скрытому элементу управления TextArea и либо устанавливают его содержимое в желаемое новое содержимое буфера обмена для копирования, либо читают его содержимое после завершения события для вставки.
смотрите также Можно ли прочитать буфер обмена в Firefox, Safari и Chrome с помощью Javascript?
Сейчас лето 2015 года, и в условиях такой суматохи вокруг Flash я решил добавить новый ответ на этот вопрос, который вообще позволит избежать его использования.
буфер обмена.js — хорошая утилита, позволяющая копировать текстовые или HTML-данные в буфер обмена.Его очень легко использовать, просто включите .js и используйте что-то вроде этого:
<button id='markup-copy'>Copy Button</button>
<script>
document.getElementById('markup-copy').addEventListener('click', function() {
clipboard.copy({
'text/plain': 'Markup text. Paste me into a rich text editor.',
'text/html': '<i>here</i> is some <b>rich text</b>'
}).then(
function(){console.log('success'); },
function(err){console.log('failure', err);
});
});
</script>
clipboard.js также включен GitHub
В 2017 году вы сможете это сделать (говорю это потому, что этой теме уже почти 9 лет!)
function copyStringToClipboard (string) {
function handler (event){
event.clipboardData.setData('text/plain', string);
event.preventDefault();
document.removeEventListener('copy', handler, true);
}
document.addEventListener('copy', handler, true);
document.execCommand('copy');
}
А теперь скопировать copyStringToClipboard('Hello World')
Если вы заметили setData
и задался вопросом, можете ли вы установить разные типы данных, ответ — да.
Firefox позволяет хранить данные в буфере обмена, но из соображений безопасности он по умолчанию отключен.Посмотрите, как включить его в «Предоставление доступа JavaScript к буферу обмена» в базе знаний Mozilla Firefox.
Решение, предлагаемое amdfan, является лучшим, если у вас много пользователей и настройка их браузера невозможна.Хотя вы можете проверить, доступен ли буфер обмена, и предоставить ссылку для изменения настроек, если пользователи технически подкованы.Редактор JavaScript TinyMCE следует этому подходу.
Функция copyIntoClipboard() работает для Flash 9, но, похоже, она не работает в версии Flash player 10.Вот решение, которое работает с новым флеш-плеером:
http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/
Это сложное решение, но оно работает.
Я должен сказать, что ни одно из этих решений Действительно работа.Я попробовал решение с буфером обмена из принятого ответа, и оно не работает с Flash Player 10.Я также попробовал ZeroClipboard и какое-то время был им очень доволен.
В настоящее время я использую его на своем сайте (http://www.blogtrog.com), но я заметил в нем странные ошибки.Принцип работы ZeroClipboard заключается в том, что он помещает невидимый Flash-объект поверх элемента на вашей странице.Я обнаружил, что если мой элемент перемещается (например, когда пользователь изменяет размер окна, а я выравниваю все правильно), флэш-объект ZeroClipboard выходит из строя и больше не закрывает объект.Я подозреваю, что он, вероятно, все еще сидит там, где стоял изначально.У них есть код, который должен остановить это или повторно прикрепить его к элементу, но, похоже, он работает не очень хорошо.
Так...в следующей версии BlogTrog, я думаю, я последую примеру всех других средств подсветки кода, которые я видел в дикой природе, и удалю кнопку «Копировать в буфер обмена».:-(
(Я заметил, что копирование в буфер обмена dp.syntaxhilighter теперь также не работает.)
слишком старый вопрос, но я нигде не видел этого ответа...
Проверьте эту ссылку:
http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard
как все сказали, по соображениям безопасности по умолчанию отключено.ссылка выше показывает инструкции по ее включению (путем редактирования about:config в Firefox или user.js).
К счастью, существует плагин под названием «AllowClipboardHelper», который упрощает задачу всего за несколько кликов.однако вам все равно необходимо проинструктировать посетителей вашего сайта, как включить доступ в Firefox.
Я использовал Github Клиппи для моих нужд простая кнопка на базе Flash.Прекрасно работает, если не требуется стилизация и он доволен вставкой что вставить на стороне сервера заранее.
Используйте современный документ. Посмотрите этот ответ stackoverflow
var ClipboardHelper = { // as Object
copyElement: function ($element)
{
this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
var $tempInput = $("<textarea>");
$("body").append($tempInput);
$tempInput.val(text).select();
document.execCommand("copy");
$tempInput.remove();
}};
Как позвонить:
ClipboardHelper.copyText('Hello\nWorld');
ClipboardHelper.copyElement($('body h1').first());
// JQUERY DOCUMENT
;(function ( $, window, document, undefined ) {
var ClipboardHelper = {
copyElement: function ($element)
{
this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
var $tempInput = $("<textarea>");
$("body").append($tempInput);
//todo prepare Text: remove double whitespaces, trim
$tempInput.val(text).select();
document.execCommand("copy");
$tempInput.remove();
}
};
$(document).ready(function()
{
var $body=$('body');
$body.on('click', '*[data-copy-text-to-clipboard]', function(event)
{
var $btn=$(this);
var text=$btn.attr('data-copy-text-to-clipboard');
ClipboardHelper.copyText(text);
});
$body.on('click', '.js-copy-element-to-clipboard', function(event)
{
ClipboardHelper.copyElement($(this));
});
});
})( jQuery, window, document );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span data-copy-text-to-clipboard=
"Hello
World">
Copy Text
</span>
<br><br>
<span class="js-copy-element-to-clipboard">
Hello
World
Element
</span>
Небольшое улучшение решения Flash заключается в обнаружении Flash 10 с помощью swfobject:
http://code.google.com/p/swfobject/
а затем, если он отображается как flash 10, попробуйте загрузить объект Shockwave с помощью JavaScript.Shockwave может читать/записывать в буфер обмена (во всех версиях), а также использовать команду copyToClipboard() на жаргоне.
http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp работает с Flash 10 и всеми браузерами с поддержкой Flash.
Также был обновлен ZeroClipboard, чтобы избежать упомянутой ошибки, связанной с прокруткой страницы, из-за которой Flash-ролик больше не находится в нужном месте.
Поскольку этот метод «требует», чтобы пользователь нажал кнопку для копирования, это удобно для пользователя и ничего плохого не происходит.
Если вы поддерживаете Flash, вы можете использовать https://everyplay.com/assets/clipboard.swf и используйте текст flashvars, чтобы установить текст
https://everyplay.com/assets/clipboard.swf?text=It%20Works
Это тот, который я использую для копирования, и вы можете установить его как дополнительный, если он не поддерживает эти параметры, которые вы можете использовать:
Для Интернет Эксплорера: window.clipboardData.setData(DataFormat, Text) и window.clipboardData.getData(DataFormat)
Вы можете использовать текст и URL-адрес DataFormat для getData и setData.
И чтобы удалить данные:
Вы можете использовать файл, HTML, изображение, текст и URL-адрес DataFormat.ПС:Вам нужно использовать window.clipboardData.clearData(DataFormat);
А для других файлов, которые не поддерживают window.clipboardData и SWF-файлы, вы также можете использовать кнопку Control + C на клавиатуре для Windows и для Mac — команду + C
Из кода дополнения:
Если кто-то еще искал, как это сделать из кода Chrome, вы можете использовать интерфейс nsIClipboardHelper, как описано здесь: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard
Использовать document.execCommand('copy')
.Поддерживается в последних версиях Chrome
, Firefox
, Edge
, и Safari
.
function copyText(text){
function selectElementText(element) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(element);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
}
var element = document.createElement('DIV');
element.textContent = text;
document.body.appendChild(element);
selectElementText(element);
document.execCommand('copy');
element.remove();
}
var txt = document.getElementById('txt');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
copyText(txt.value);
})
<input id="txt" value="Hello World!" />
<button id="btn">Copy To Clipboard</button>
попробуйте создать глобальную переменную памяти, хранящую выбор, тогда другая функция сможет получить доступ к переменной и, например, выполнить вставку.
var memory = '';//outside the functions but within the script tag.
function moz_stringCopy(DOMEle,firstPos,secondPos) {
var copiedString = DOMEle.value.slice(firstPos, secondPos);
memory = copiedString;
}
function moz_stringPaste(DOMEle, newpos) {
DOMEle.value = DOMEle.value.slice(0,newpos) + memory + DOMEle.value.slice(newpos);
}
API буфера обмена призван заменить document.execCommand
.Safari все еще работает над поддержкой, поэтому вам следует предоставить запасной вариант до тех пор, пока спецификация не будет согласована и Safari не завершит реализацию.
const permalink = document.querySelector('[rel="bookmark"]');
const output = document.querySelector('output');
permalink.onclick = evt => {
evt.preventDefault();
window.navigator.clipboard.writeText(
permalink.href
).then(() => {
output.textContent = 'Copied';
}, () => {
output.textContent = 'Not copied';
});
};
<a href="https://stackoverflow.com/questions/127040/" rel="bookmark">Permalink</a>
<output></output>
В целях безопасности буфер обмена Permissions
может потребоваться чтение и запись из буфера обмена.Если фрагмент не работает, ТАК попробуйте localhost
или иным образом доверенный домен.