Я знаю, что этот вопрос задавался здесь много раз, в том числе: Как скопировать в буфер обмена в JavaScript? или Как скопировать текст в буфер обмена клиента с помощью jQuery?, я сужу область:
Состояние:
Есть ли такое решение или обходное решение?
Я просто нахожу еще один потрясающий репо на Github.
Современная копия в буфер обмена. Нет вспышки. Всего 3 КБ разархивировано
Поддержка браузера:
Вы можете использовать либо document.execCommand('copy'), либо addEventListener('copy'), либо комбинацию обоих.
1. выбор копии на пользовательском мероприятии
Если вы хотите вызвать copy для какого-либо другого события, кроме ctrl-c или щелкнуть правой кнопкой мыши, используйте document.execCommand('copy'). Он скопирует выбранные в настоящее время. Например, при помощи мыши, например:
elem.onmouseup = function(){
document.execCommand('copy');
}
EDIT:
document.execCommand('copy') поддерживается только Chrome 42, IE9 и Opera 29, но будет поддерживаться firefox 41 (запланировано на сентябрь 2015 года). Обратите внимание, что IE обычно запрашивает разрешение на доступ к буферу.
https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
2. копировать пользовательский контент при копировании, вызванном пользователем
Или вы можете использовать addEventListener('copy'), это будет мешать событию копирования, и вы можете поместить туда контент. Предположим, пользователь запускает копию.
EDIT:
В Chrome, Firefox и Safari событие имеет объект clipboardData с методом setData. В IE объект clipboardData является свойством окна. Таким образом, это может работать на всех основных браузерах, если вы проверяете, где находится clipboardData.
elem2.addEventListener('copy', function (e) {
e.preventDefault();
if (e.clipboardData) {
e.clipboardData.setData('text/plain', 'custom content');
} else if (window.clipboardData) {
window.clipboardData.setData('Text', 'custom content');
}
});
https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData https://msdn.microsoft.com/en-us/library/ms535220(v=vs.85).aspx
3. бит как
Используя комбинацию, вы можете скопировать пользовательский контент в нужные события. Таким образом, первое событие запускает execCommand, затем помещается listener. Например, поместите пользовательский контент в клик на div.
elem3.onclick = function () {
document.execCommand('copy');
}
elem3.addEventListener('copy', function (e) {
e.preventDefault();
if (e.clipboardData) {
e.clipboardData.setData('text/plain', 'custom content from click');
} else if (window.clipboardData) {
window.clipboardData.setData('Text', 'custom content from click');
}
});
Используя этот последний, предполагается, что оба подхода поддерживаются, по состоянию на июль 2015 года он работает только на Chrome 43 (может быть, 42 я не смог проверить) и IE не менее 9 и 10. С поддержкой Firefox 41 execcommand('copy'), он также должен работать.
Обратите внимание, что для большинства этих методов и свойств объявляются как экспериментальные (или даже устаревшие для IE), поэтому их следует использовать осторожно, но похоже, что они все больше поддерживаются.
Скрипт со всеми примерами: https://jsfiddle.net/jsLfnnvy/12/
Переменная строка может копироваться в буфер обмена, используя код js.
var text = 'text to copy';
var copyFrom = $('<textarea/>');
copyFrom.css({
position: "absolute",
left: "-1000px",
top: "-1000px",
});
copyFrom.text(text);
$('body').append(copyFrom);
copyFrom.select();
document.execCommand('copy');
Собственно, для тех, кто это выясняет, я получил его для работы в хроме, основываясь на ответе @JulianGregoire.
Я переписал код, чтобы сделать его немного лучше, на мой взгляд:
el.onclick = function () {
var copy = function (e) {
e.preventDefault();
console.log('copy');
var text = "blabla"
if (e.clipboardData) {
e.clipboardData.setData('text/plain', text);
} else if (window.clipboardData) {
window.clipboardData.setData('Text', text);
}
}
window.addEventListener('copy', copy);
document.execCommand('copy');
window.removeEventListener('copy', copy);
}
Опасайтесь: я пробовал точно такой же script у Жюльена Грегуара, но это не вызвало прослушиватель событий oncopy. Причина: у меня был пользовательский CSS-код для тега body.
Поэтому убедитесь, что вы удалили его, или установите его на initial в элементе, к которому подключен прослушиватель событий.
Если вы используете нокаут, как и я (по какой-то причине я до сих пор), вам нужно взглянуть на этот вопрос/ответ:
Если вы не возражаете против IE/Safari, вы можете использовать следующий (новый) API:
var promise = navigator.clipboard.writeText(newClipText)
function copyToClipboard(s) {
if (window.clipboardData && clipboardData.setData) {
clipboardData.setData('text', s);
}
}
Затем вызовите функцию с текстом, и это должно работать.