Скопировать выделенный текст в буфер обмена БЕЗ использования флэш-памяти - должен быть кросс-браузер
Я хочу иметь кнопку, которая выбирает текст в textarea
и копирует его в буфер обмена. Кажется, я не могу найти решения, которые работают во всех браузерах и не будут использовать flash.
Неужели это выполнимо? Я видел это повсюду, но я предполагаю, что они используют вспышку, и я действительно хочу держаться подальше, если это возможно, поскольку некоторые люди не имеют ее.
Это то, что у меня есть до сих пор - он просто выбирает текст:
function copyCode() {
$("#output-code").focus();
$("#output-code").select();
}
(Фокус не является абсолютно необходимым)
Ответы
Ответ 1
ExecCommand ( 'копия')
Есть очень новый вариант. Это кросс-браузер, но это займет время, пока все не обновят свой браузер.
Работает с помощью функции document.execCommand('copy');
.
С помощью этой функции вы скопируете выделенный текст. Это будет работать не только с textarea
, но и с каждым выделенным текстом на веб-странице (например, в span
, p
, div
и т.д.).
Доступно в Internet Explorer 10+, Chrome 43+, Opera 29+ и Firefox 41+ (см. execCommand
совместимость здесь).
Пример
// Setup the variables
var textarea = document.getElementById("textarea");
var answer = document.getElementById("copyAnswer");
var copy = document.getElementById("copyBlock");
copy.addEventListener('click', function(e) {
// Select some text (you could also create a range)
textarea.select();
// Use try & catch for unsupported browser
try {
// The important part (copy selected text)
var ok = document.execCommand('copy');
if (ok) answer.innerHTML = 'Copied!';
else answer.innerHTML = 'Unable to copy!';
} catch (err) {
answer.innerHTML = 'Unsupported Browser!';
}
});
<textarea id="textarea" rows="6" cols="40">
Lorem ipsum dolor sit amet, eamsemper maiestatis no.
</textarea><br/>
<button id="copyBlock">Click to copy</button> <span id="copyAnswer"></span>
Ответ 2
Вы должны использовать надстройку Flash, которую вы не хотите использовать для автоматической копирования текста в буфер обмена клиентов. Веб-сайт, автоматически изменяющий клиентский буфер обмена без помощи компонентов active-x, является проблемой безопасности. Обратите внимание, что компоненты active-x - это программы, которые запускаются на пользовательском компьютере и, технически, требуют согласия пользователя на установку. Учитывая, что Clipboard является компонентом операционной системы, будьте рады, что веб-браузеры не позволяют веб-сайтам по умолчанию использовать его.
Если у пользователя нет Flash, отключена функция Flash или отключена функция active-x, он или она, вероятно, параноидально относится к безопасности и не хочет, чтобы вы возились со своей клавиатурой. В этот момент пользователь будет использовать не столько автоматическую, либо script базовую функциональность на веб-сайтах. Лучше не пытаться открыто игнорировать пожелания конечного пользователя.
Обратитесь к следующим ссылкам:
Конечным ответом является использование Zero Clipboard, который представляет собой библиотеку, которая использует небольшой невидимый Flash-фильм и JavaScript для использования функций буфера обмена, как вы этого хотите. Библиотека доступна здесь: https://github.com/zeroclipboard/zeroclipboard Вторая ссылка показывает, как определить, отключена или не установлена Flash, что позволяет вам отображать как и для JavaScript.
Ответ 3
Теперь мы Clipboard.js от @zenorocha
Чтобы использовать его, загрузите и вызовите script на странице .html(или установите с помощью bower или npm)
<script src="path_to_script/clipboard.min.js"></script>
Создайте новый триггер на script.js
new Clipboard('.trigger');
И идите туда, чтобы увидеть некоторые примеры использования: http://zenorocha.github.io/clipboard.js/#usage
Ответ 4
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.style.position = 'fixed';
textArea.style.top = 0;
textArea.style.left = 0;
textArea.style.width = '2em';
textArea.style.height = '2em';
textArea.style.padding = 0;
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
textArea.style.background = 'transparent';
textArea.value = text;
textArea.id = 'ta';
document.body.appendChild(textArea);
//textArea.select();
var range = document.createRange();
range.selectNode(textArea);
textArea.select();
window.getSelection().addRange(range);
try {
var successful = document.execCommand('copy');
} catch (err) {
alert('Oops, unable to copy');
}
document.body.removeChild(textArea);
return successful;
}
Надеюсь, что это полезно
Ответ 5
Это довольно поздний ответ, но для тех, кто ищет в будущем, и имеет проблемы с реализацией события execCommand ('copy') для работы как на настольных, так и на мобильных устройствах.
Кросс-браузер, удобный для мобильных устройств и отсутствие необходимости иметь внешние источники или программы
function CopyString(){
var StringToCopyElement = document.getElementById('YourId');
StringToCopyElement.select();
if(document.execCommand('copy')){
StringToCopyElement.blur();
}else{
CopyStringMobile();
}
}
function CopyStringMobile(){
document.getElementById("YourId").selectionStart = 0;
document.getElementById("YourId").selectionEnd = 999;
document.execCommand('copy');
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection) { // IE?
document.selection.empty();
}
}
Установите функцию CopyString() в событие щелчка на все, что вы хотите, чтобы запустить событие. Это доступно для использования как на мобильных, так и на настольных операционных системах.
Объяснение
Вам нужно иметь два разных способа выбрать строку для копирования, поскольку на сегодняшний день метод для этого через рабочий стол не будет работать для мобильных устройств. У меня есть функция if then, чтобы поймать, если рабочий стол работал, а если нет, чтобы запустить код, который будет работать для мобильного устройства. Этот метод не требует загрузки или ссылок. Оба метода выделяют текст, который вы хотите копировать, затем запускаете команду копирования в буфер обмена, а затем удаляете строку, которую вы пытаетесь скопировать. Вы можете смешать код по своему вкусу, но это способ сделать это.