Каков наилучший способ скопировать текст в буфер обмена? (Мульти-браузер)
Я пытался:
function copyToClipboard(text) {
if (window.clipboardData) { // Internet Explorer
window.clipboardData.setData("Text", text);
} else {
unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
clipboardHelper.copyString(text);
}
}
но в Internet Explorer выдает синтаксическую ошибку. В Firefox сказано unsafeWindow is not defined
.
Хороший трюк без вспышки: как Trello получает доступ к буферу обмена пользователя?
javascript
clipboard
copy-paste
Сантьяго Корредойра
источник
источник
Ответы:
обзор
Существует три основных API браузера для копирования в буфер обмена:
[navigator.clipboard.writeText]
document.execCommand('copy')
Общие замечания по разработке
Не ожидайте, что команды, связанные с буфером обмена, будут работать, пока вы тестируете код в консоли. Как правило, страница должна быть активной (Async Clipboard API) или требует взаимодействия с пользователем (например, щелчок пользователя), чтобы разрешить (
document.execCommand('copy')
) доступ к буферу обмена, подробнее см. Ниже.ВАЖНО (отмечено здесь 2020/02/20)
Обратите внимание, что поскольку в этом посте изначально было написано об устаревании разрешений в перекрестных источниках IFRAME и других «песочницах» IFRAME, в некоторых браузерах (включая Chrome и Microsoft Edge) не работают встроенные демонстрационные кнопки «Выполнить фрагмент кода» и «пример codepen.io». ).
Для разработки создайте свою собственную веб-страницу, используйте эту страницу через соединение HTTPS для тестирования и разработки.
Вот тестовая / демонстрационная страница, которая демонстрирует работающий код: https://deanmarktaylor.github.io/clipboard-test/
Async + Fallback
Из-за уровня поддержки браузера для нового Async Clipboard API вы, вероятно, захотите использовать этот
document.execCommand('copy')
метод, чтобы получить хорошее покрытие браузера.Вот простой пример (может не работать, встроенный в этот сайт, прочитайте «важное» примечание выше):
(пример codepen.io может не работать, прочитайте «важное» примечание выше). Обратите внимание, что этот фрагмент плохо работает во встроенном предварительном просмотре Stack Overflow, вы можете попробовать его здесь: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors = 1011
Async Clipboard API
Обратите внимание, что в Chrome 66 есть возможность «запросить разрешение» и проверить доступ к буферу обмена через API разрешений.
document.execCommand ( 'копия')
Остальная часть этого поста посвящена нюансам и деталям
document.execCommand('copy')
API.Поддержка браузера
Поддержка JavaScript
document.execCommand('copy')
возросла, см. Ссылки ниже для обновлений браузера:Простой пример
(может не работать встроенным в этот сайт, прочитайте "важное" примечание выше)
Сложный пример: копирование в буфер обмена без отображения ввода
Приведенный выше простой пример прекрасно работает, если на экране виден элемент
textarea
илиinput
.В некоторых случаях вы можете скопировать текст в буфер обмена без отображения элемента
input
/textarea
. Это один из примеров способа обойти это (в основном вставка элемента, копирование в буфер обмена, удаление элемента):Протестировано с Google Chrome 44, Firefox 42.0a1 и Internet Explorer 11.0.8600.17814.
(может не работать встроенным в этот сайт, прочитайте "важное" примечание выше)
Дополнительные замечания
Работает только в том случае, если пользователь выполняет действие
Все
document.execCommand('copy')
вызовы должны происходить как прямой результат действия пользователя, например, обработчик события click. Это мера, позволяющая избежать путаницы с буфером обмена пользователя, когда он этого не ожидает.Смотрите пост разработчиков Google здесь для получения дополнительной информации.
API буфера обмена
Обратите внимание, что полный проект спецификации API буфера обмена можно найти здесь: https://w3c.github.io/clipboard-apis/
Это поддерживается?
document.queryCommandSupported('copy')
должен вернуться,true
если команда «поддерживается браузером».document.queryCommandEnabled('copy')
вернитесь,true
еслиdocument.execCommand('copy')
будет успешно, если вызывается сейчас. Проверка того, что команда была вызвана из потока, инициированного пользователем, и выполнены ли другие требования.Однако в качестве примера проблем совместимости с браузером Google Chrome, с апреля по ~ ~ октября 2015 года только вернулись
true
из ,document.queryCommandSupported('copy')
если команда была вызвана инициированным пользователем потока.Обратите внимание на детали совместимости ниже.
Сведения о совместимости браузера
В то время как простой вызов
document.execCommand('copy')
обернутого вtry
/catch
block, вызываемый в результате щелчка пользователя, обеспечит вам наибольшую совместимость, используйте следующие условия:Любой вызов
document.execCommand
,document.queryCommandSupported
илиdocument.queryCommandEnabled
должен быть завернут вtry
/catch
блоке.Различные реализации браузера и версии браузера выдают разные типы исключений при вызове вместо возврата
false
.Различные реализации браузеров все еще находятся в движении, а API буфера обмена все еще находится в стадии разработки, поэтому не забудьте провести тестирование.
источник
var str = "word";
?<textarea>
с помощью JS, добавьте егоdocument.body
, задайте его значение для переменной и используйте его в темпеcopyTextarea
, затем удалите его сразу после копирования содержимого.Автоматическое копирование в буфер обмена может быть опасным, поэтому большинство браузеров (кроме IE) делают это очень сложно. Лично я использую следующий простой трюк:
Пользователю предоставляется окно приглашения, в котором текст для копирования уже выделен. Теперь достаточно нажать Ctrl+ Cи Enter(чтобы закрыть окно) - и вуаля!
Теперь операция копирования в буфер обмена БЕЗОПАСНА, потому что пользователь делает это вручную (но довольно просто). Конечно, работает во всех браузерах.
источник
Следующий подход работает в Chrome, Firefox, Internet Explorer и Edge, а также в последних версиях Safari (поддержка копирования была добавлена в версии 10, выпущенной в октябре 2016 года).
Примечание: вы не увидите текстовое поле, так как оно добавляется и удаляется в рамках одного и того же синхронного вызова кода Javascript.
Некоторые вещи, на которые стоит обратить внимание, если вы реализуете это самостоятельно:
Приведенная ниже функция должна обрабатывать все следующие проблемы как можно более чисто. Пожалуйста, оставьте комментарий, если вы обнаружите какие-либо проблемы или у вас есть предложения по улучшению.
https://jsfiddle.net/fx6a6n6x/
источник
Вот мой взгляд на это ...
@korayem: обратите внимание, что использование
input
поля html не будет учитывать разрывы строк\n
и сведет любой текст в одну строку.Как упомянуто @nikksan в комментариях, использование
textarea
исправит проблему следующим образом:источник
\n
?\r\n
разрыв строкиЕсли вы хотите действительно простое решение (занимает меньше 5 минут для интеграции) и хорошо выглядят прямо из коробки, то Clippy - хорошая альтернатива некоторым более сложным решениям.
Он был написан соучредителем GitHub. Пример встроенного кода Flash ниже:
Не забудьте заменить
#{text}
текст, который вам нужно скопировать, и#{bgcolor}
цветом.источник
Чтение и изменение буфера обмена с веб-страницы вызывает проблемы безопасности и конфиденциальности. Однако в Internet Explorer это можно сделать. Я нашел этот пример фрагмента :
источник
execCommand(\\’copy\\’);
делает, если не скопировать в буфер обмена для IE? @mrBornaif(!document.all)
ноif(!r.execCommand)
никто другой не реализует это! Document.all абсолютно не имеет к этому отношения.Я недавно написал технический пост в блоге об этой самой проблеме (я работаю в Lucidchart, и мы недавно сделали капитальный ремонт нашего буфера обмена).
Копировать простой текст в буфер обмена относительно просто, если вы хотите сделать это во время события копирования системы (пользователь нажимает CtrlCили использует меню браузера).
Поместить текст в буфер обмена не во время системного копирования намного сложнее. Похоже, что некоторые из этих других ответов ссылаются на способы сделать это через Flash, который является единственным кросс-браузерным способом сделать это (насколько я понимаю).
Помимо этого, есть несколько вариантов для каждого браузера.
Это самый простой в IE, где вы можете получить доступ к объекту clipboardData в любое время из JavaScript через:
(Однако, если вы попытаетесь сделать это вне системного события вырезания, копирования или вставки, IE предложит пользователю предоставить разрешение буфера обмена веб-приложения.)
В Chrome вы можете создать расширение Chrome, которое предоставит вам разрешения для буфера обмена (это то, что мы делаем для Lucidchart). Тогда для пользователей с установленным расширением вам просто нужно самостоятельно запустить системное событие:
Похоже, что в Firefox есть некоторые параметры, которые позволяют пользователям предоставлять разрешения определенным сайтам для доступа к буферу обмена, но я не пробовал ничего из этого лично.
источник
clipboard.js - небольшая, не Flash, утилита, которая позволяет копировать текстовые или HTML-данные в буфер обмена. Это очень легко использовать, просто включите .js и используйте что-то вроде этого:
clipboard.js также есть на GitHub .
источник
ZeroClipboard - лучшее кросс-браузерное решение, которое я нашел:
Если вам нужна поддержка не-flash для iOS, просто добавьте запасной вариант:
http://zeroclipboard.org/
https://github.com/zeroclipboard/ZeroClipboard
источник
src
в тегах скрипта). Я чувствую, что их документация хороша, но неэффективна.В 2018 году вот как вы можете это сделать:
Он используется в моем коде Angular 6+ примерно так:
Если я передаю строку, она копируется. Если ничего, он копирует URL страницы.
Можно сделать еще больше гимнастики для буфера обмена. Смотрите больше информации здесь:
Разблокировка доступа к буферу обмена
источник
В одном из проектов, над которым я работал, плагин jQuery для копирования в буфер обмена, использующий библиотеку Zero Clipboard .
Его легче использовать, чем нативный плагин Zero Clipboard, если вы любитель jQuery.
источник
text()
его,innerHTML()
если хотите…innerHTML
кросс-браузер уже давно поддерживается. Просто потому, что Microsoft изначально пришла в голову идея, она не делает ее ненадежной или проприетарной. Это также теперь наконец добавлено к официальной спецификации (после того, как каждый крупный поставщик браузера уже добавил поддержку для этого ... вздох ).92KB
действительно большой. Пока LTE не станет зрелым, GPRS является стандартом мобильной передачи данных WW , и он начинается с1 KB/s
. Сделай математику сам.Поскольку Chrome 42+ и Firefox 41+ теперь поддерживают команду document.execCommand ('copy') . Таким образом , я создал несколько функций для возможности кросс-браузерной копирования в буфер обмена , используя сочетание старого ответа Тима Дауна и ответ Google разработчика :
источник
Я использую это очень успешно ( без JQuery или каких-либо других фреймворков).
Предупреждение
Вкладки преобразуются в пробелы (по крайней мере, в Chrome).
источник
Я нашел следующее решение:
Обработчик нажатия клавиш создает тег «pre». Мы устанавливаем содержимое для копирования в этот тег, затем выбираем этот тег и возвращаем true в обработчике. Это вызывает стандартный обработчик хрома и копирует выделенный текст.
И если вам нужно, вы можете установить тайм-аут для функции для восстановления предыдущего выбора. Моя реализация на Mootools:
Применение:
При вставке он создает текстовую область и работает так же.
PS может быть это решение может быть использовано для создания полностью кросс-браузерного решения без флеш-памяти. Работает в FF и Chrome.
источник
Другие методы будут копировать обычный текст в буфер обмена. Чтобы скопировать HTML (т.е. вы можете вставить результаты в редактор WSIWYG), вы можете сделать следующее только в IE . Это принципиально отличается от других методов, поскольку браузер фактически визуально выбирает контент.
источник
Я собрал то, что считаю лучшим.
Вот:
Применение:
copyToClipboard('some text')
источник
Начиная с Flash 10, вы можете копировать в буфер обмена только в том случае, если действие происходит в результате взаимодействия пользователя с объектом Flash. ( Прочитайте соответствующий раздел из объявления Adobe Flash 10 )
Решение состоит в том, чтобы чрезмерно поместить объект Flash над кнопкой «Копировать» или любым другим элементом, который инициирует копирование. Zero Clipboard в настоящее время является лучшей библиотекой с этой реализацией. Опытные разработчики Flash могут просто захотеть создать свою собственную библиотеку.
источник
источник
Я нашел следующее решение:
У меня есть текст в скрытом входе. Поскольку
setSelectionRange
не работает со скрытыми вводами, я временно изменил тип на текст, скопировал текст, а затем снова сделал его скрытым. Если вы хотите скопировать текст из элемента, вы можете передать его в функцию и сохранить его содержимое в целевой переменной.источник
Скопируйте текст из HTML-ввода в буфер обмена:
Примечание. Этот
document.execCommand()
метод не поддерживается в Internet Explorer 9 и более ранних версиях.Источник : W3Schools - Скопировать текст в буфер обмена
источник
Ответов уже много, но хотелось бы добавить один (jQuery). Отлично работает в любом браузере, в том числе и в мобильном (например, запрашивает информацию о безопасности, но когда вы его принимаете, он просто отлично работает).
В вашем коде:
источник
Это что-то вроде комбинации между другими ответами.
Он использует JQuery, но это не обязательно, конечно. Вы можете изменить это, если хотите. Я просто имел в своем распоряжении jQuery. Вы также можете добавить немного CSS, чтобы убедиться, что ввод не отображается. Например что-то вроде:
Или, конечно, вы могли бы также сделать некоторые встроенные стили
источник
textToCopy
содержит\n
В браузерах, отличных от IE, вам нужно использовать небольшой flash-объект для работы с буфером обмена, например
источник
У меня была такая же проблема при создании пользовательского редактирования сетки (что-то вроде Excel) и совместимости с Excel. Мне пришлось поддерживать выбор нескольких ячеек, копирование и вставку.
Решение: создайте текстовую область, в которую вы будете вставлять данные для копирования пользователем (для меня, когда пользователь выбирает ячейки), установите фокус на нем (например, когда пользователь нажимает Ctrl ) и выделите весь текст.
Итак, когда пользователь нажал Ctrl+C он / она получает скопированные ячейки, которые он / она выбрал. После тестирования просто изменил размер текстовой области до одного пикселя (я не проверял, будет ли он работать на дисплее: нет). Он хорошо работает во всех браузерах и прозрачен для пользователя.
Вставка - вы можете сделать то же самое (отличается от цели) - сосредоточьтесь на textarea и ловите события вставки, используя onpaste (в моем проекте я использую textareas в ячейках для редактирования).
Я не могу вставить пример (коммерческий проект), но вы поняли идею.
источник
Я использовал clipboard.js.
Мы можем получить его по npm:
А также на Bower
Использование и примеры на https://zenorocha.github.io/clipboard.js/ .
источник
Это расширение ответа @ Chase с тем преимуществом, что оно будет работать для элементов IMAGE и TABLE, а не только для DIV в IE9.
источник
Кажется, я неправильно понял вопрос, но для справки вы можете извлечь диапазон DOM (не для буфера обмена; совместим со всеми современными браузерами) и объединить его с событиями oncopy, onpaste и onbeforepaste, чтобы получить поведение буфера обмена. Вот код для достижения этого:
источник
Виноват. Это работает только в IE.
Вот еще один способ скопировать текст:
источник
Это была единственная вещь, которую я когда-либо получал, после того, как искал разные способы поиска по всему Интернету. Это грязная тема. По всему миру опубликовано множество решений, и большинство из них не работают. Это сработало для меня:
ПРИМЕЧАНИЕ. Этот код будет работать только в том случае, если он выполняется как прямой синхронный код для чего-то вроде метода onClick Если вы вызываете асинхронный ответ на Ajax или любым другим асинхронным способом, он не будет работать.
Я действительно понимаю, что этот код будет показывать компонент шириной в 1 пиксель видимым образом на экране в течение миллисекунды, но решил не беспокоиться об этом, к чему другие могут обратиться, если возникнет реальная проблема.
источник
Чтобы скопировать выделенный текст («Текст для копирования») в буфер обмена, создайте Bookmarklet (закладка браузера, которая выполняет JavaScript) и выполните его (щелкните по нему). Это создаст временную текстовую область.
Код из GitHub:
https://gist.github.com/stefanmaric/2abf96c740191cda3bc7a8b0fc905a7d
источник