событие.clipboardData.setData в событии копирования
Я просмотрел много сообщений, но не смог найти четкого ответа на следующие два вопроса, поскольку, похоже, стандарты и поддержка браузера постоянно меняются.
является ли это законной операцией в соответствии со стандартом для изменения буфера обмена с событием.clipboardData.setData внутри обработчика событий "копировать"?
последние версии Chrome / FF / Safari / IE / Chrome iOS / Android/iPhones поддерживают это правильно ?
спасибо!
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');
}
поддержка браузеров различается
- Firefox поддерживает как
clipboardData
наcopy
/cut
/paste
событий (С Firefox 22) иexecCommand('copy')
от действий пользователя (начиная с Firefox 41) - Chrome также поддерживает оба (последний был добавлено в Chrome 43 или наверное 42?)
- caniuse.com утверждает, что Safari (по состоянию на 9.1) не поддерживает последнее.
- состояние платформы MS Edge перечисляет IE / Edge как не поддерживающий API буфера обмена, ссылка на детали нарушена на момент.
https://github.com/garykac/clipboard/blob/master/clipboard.md имеет таблицу совместимости для execCommand(cut / copy / paste)
.
вы можете проверить это, используя фрагмент ниже, прокомментируйте результаты.
вы также можете просто превратить его в функцию, которая вызывает его собственный обработчик и удаляет его
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');
}
свяжите идентификатор элемента с событием копирования, а затем получите выбранный текст. Можно заменить или изменить текст. Получить буфер обмена и выберите текст. Чтобы получить точное форматирование, вам нужно установить тип как "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();
});