событие.clipboardData.setData в событии копирования

Я просмотрел много сообщений, но не смог найти четкого ответа на следующие два вопроса, поскольку, похоже, стандарты и поддержка браузера постоянно меняются.

  1. является ли это законной операцией в соответствии со стандартом для изменения буфера обмена с событием.clipboardData.setData внутри обработчика событий "копировать"?

  2. последние версии Chrome / FF / Safari / IE / Chrome iOS / Android/iPhones поддерживают это правильно ?

спасибо!

15
clipboarddata html5 javascript javascript-events w3c

3 ответов

API буфера обмена действительно находятся в активной разработке с 2016 года, но вот мое понимание текущего состояния дел.

используя событие.clipboardData.поддерживается setData ()

изменение буфера обмена с event.clipboardData.setData() внутри 'copy' обработчик событий разрешен спецификацией (если событие не синтетические).

обратите внимание, что необходимо предотвратить действие по умолчанию в обработчике событий, чтобы предотвратить изменения перезаписано браузером:

document.addEventListener('copy', function(e){
  e.clipboardData.setData('text/plain', 'foo');
  e.preventDefault(); // default behaviour is to copy any selected text
});

для запуска события копирования используйте execCommand

Если вам нужно вызвать событие копирования (а не просто обрабатывать запросы копирования, сделанные пользователем через пользовательский интерфейс браузера), вы должны использовать document.execCommand('copy'). Он будет работать только в определенных обработчиках, таких как click обработчик:

document.getElementById("copyBtn").onclick = function() {
  document.execCommand('copy');
}

поддержка браузеров различается

https://github.com/garykac/clipboard/blob/master/clipboard.md имеет таблицу совместимости для execCommand(cut / copy / paste).

вы можете проверить это, используя фрагмент ниже, прокомментируйте результаты.

31

вы также можете просто превратить его в функцию, которая вызывает его собственный обработчик и удаляет его

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');
}
9

свяжите идентификатор элемента с событием копирования, а затем получите выбранный текст. Можно заменить или изменить текст. Получить буфер обмена и выберите текст. Чтобы получить точное форматирование, вам нужно установить тип как "text / hmtl". Вы также можете привязать его к документу вместо элемента.

 $(ElementId).bind('copy', function(event) {
    var selectedText = window.getSelection().toString(); 
    selectedText = selectedText.replace(/\u200B/g, "");

    clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
    clipboardData.setData('text/html', selectedText);

    event.preventDefault();
  });
2