Автоматическое копирование в буфер обмена может быть опасным, поэтому большинство браузеров затрудняют это. Никто не хочет заканчивать с подозрительными ссылками в буфере обмена или вещами, которые могут выпороть из нас.
Любое возможное рабочее решение, которое вы можете найти в Интернете, должно быть инициировано действием пользователя, т.е. щелчком. Не любое решение, даже с Flash, будет автоматически копировать вещи без участия пользователя. Это все, что вам нужно знать, связанные с буфером обмена в Javascript или Flash.
В этой статье мы предложим вам различные способы легко решить эту задачу, используя чистый JavaScript, и если вы не сможете этого сделать, вы найдете решения, использующие flash в качестве запасного варианта с чистой реализацией.
Javascript
1. ExecCommand
Первая реализация использует функцию документа execCommand. Эта функция поддерживается в следующих браузерах:
- IE10.
- Google Chrome> = 43.
- Mozilla Firefox> = 41.
- Опера> = 29.
Трюк действительно прост, execCommand будет изначально скопировать в буфер обмена текст внутри текстовой области.
Важный
Код никогда не будет работать, если действие не инициируется пользователем (только щелчки). Ввод через консоль не будет работать. Обратите внимание, что текстовая область должна быть видимой (display: none), что приведет к сбою кода.
function setClipboardText(text){
var id = "mycustom-clipboard-textarea-hidden-id";
var existsTextarea = document.getElementById(id);
if(!existsTextarea){
console.log("Creating textarea");
var textarea = document.createElement("textarea");
textarea.id = id;
// Place in top-left corner of screen regardless of scroll position.
textarea.style.position = 'fixed';
textarea.style.top = 0;
textarea.style.left = 0;
// Ensure it has a small width and height. Setting to 1px / 1em
// doesn't work as this gives a negative w/h on some browsers.
textarea.style.width = '1px';
textarea.style.height = '1px';
// We don't need padding, reducing the size if it does flash render.
textarea.style.padding = 0;
// Clean up any borders.
textarea.style.border = 'none';
textarea.style.outline = 'none';
textarea.style.boxShadow = 'none';
// Avoid flash of white box if rendered for any reason.
textarea.style.background = 'transparent';
document.querySelector("body").appendChild(textarea);
console.log("The textarea now exists :)");
existsTextarea = document.getElementById(id);
}else{
console.log("The textarea already exists :3")
}
existsTextarea.value = text;
existsTextarea.select();
try {
var status = document.execCommand('copy');
if(!status){
console.error("Cannot copy text");
}else{
console.log("The text is now on the clipboard");
}
} catch (err) {
console.log('Unable to copy.');
}
}Поиграйте со следующей скрипкой:
2. Использование Clipboard.js
Все любят библиотеки, вы должны любить библиотеки. Библиотека делает все проще для вас, и это было проверено для многих людей. Clipboard.js это одна из тех прекрасных библиотек, которая с помощью нескольких строк поможет вам достичь своей цели. Clipboard.js — это современный подход к копированию текста в буфер обмена без Flash, он не имеет зависимостей и имеет небольшой вес.
Чтобы инициализировать clipboard.js, используйте следующий код:
Copiar texto
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.info('Accion:', e.action);
console.info('Texto:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Accion:', e.action);
console.error('Trigger:', e.trigger);
});
Конструктор буфера обмена ожидает селектор dom в качестве первого параметра. В этом случае все элементы класса btn будут копировать текст в буфер обмена. Эта библиотека тоже опирается на execCommand.
Откат со вспышкой
Если вам действительно нужно реализовать эту функцию на своем веб-сайте и предоставить поддержку старым браузерам, у вас не будет другого выбора, кроме как использовать запасной вариант с использованием Flash.
Но не беспокойтесь о путанице в вашем коде, вы можете реализовать чистое решение, используя ZeroClipboard. Посмотреть рабочий демо посетив домашнюю страницу плагина здесь.
Однако это решение не свободно от ограничений. Из-за ограничений безопасности браузера и Flash, эта инъекция в буфер обмена может происходить только тогда, когда пользователь нажимает на невидимый Flash-фильм. Симулируемого события клика из JavaScript будет недостаточно, так как это приведет к отравлению буфера обмена.
Внедрение ZeroClipboard так просто, как:
Copy to Clipboard
var client = new ZeroClipboard( document.getElementById("copy-button") );
// Wrap the events inside the ready event of the swf clipboard
client.on( "ready", function( readyEvent ) {
// alert( "ZeroClipboard SWF is ready!" );
client.on( "aftercopy", function( event ) {
// `this` === `client`
// `event.target` === the element that was clicked
event.target.style.display = "none";
alert("Copied text to clipboard: " + event.data["text/plain"] );
});
});
Повеселись !
