event.clipboardData.setData 在复制事件中
event.clipboardData.setData in copy event
我看了很多帖子,但找不到以下两个问题的明确当前答案,因为标准和浏览器支持似乎一直在不断变化。
根据标准,在 'copy' 事件处理程序中使用 event.clipboardData.setData 更改剪贴板是否是合法操作?
Chrome/FF/Safari/IE/ChromeiOS/Android/iPhones 的最新版本是否正确支持此功能?
剪贴板 API 截至 2016 年确实在积极开发,但此后情况稳定下来:
支持使用 event.clipboardData.setData()
规范允许在 'copy'
事件处理程序中使用 event.clipboardData.setData()
更改剪贴板(只要事件不是 synthetic)。
请注意,您需要阻止事件处理程序中的默认操作,以防止您的更改被浏览器覆盖:
document.addEventListener('copy', function(e){
e.clipboardData.setData('text/plain', 'foo');
e.preventDefault(); // default behaviour is to copy any selected text
});
要触发复制事件,请使用 execCommand
如果需要触发复制事件(而不只是处理用户通过浏览器发出的复制请求UI),则必须使用document.execCommand('copy')
。它只适用于某些处理程序,例如 click
处理程序:
document.getElementById("copyBtn").onclick = function() {
document.execCommand('copy');
}
现代浏览器支持这两种方法
- Firefox 在
copy
/cut
/paste
事件中同时支持 clipboardData
(since Firefox 22) and execCommand('copy')
from user actions (since Firefox 41)
- Chrome 也支持两者(后者是 added in Chrome 43 - or perhaps 42?)
- caniuse.com claims that Safari 12 has complete support, 9.1 及以下版本不支持
execCommand('copy')
.
- MS Edge Platform Status 列出 IE/Edge 截至 2019 年支持剪贴板 APIs,这与首次撰写此答案时(2016 年)不同。
https://github.com/garykac/clipboard/blob/master/clipboard.md 与 execCommand(cut / copy / paste)
.
具有兼容性 table
您可以使用下面的代码片段对此进行测试,请对结果发表评论。
更多资源
- 规格:Clipboard API and events
- The Definitive Guide to Copying and Pasting in JavaScript (2014) - 有关浏览器中剪贴板 API 互操作性的更多信息,包括支持 "copy"/"paste" 事件而不选择和支持多个格式。
- Pages tagged "Clipboard API" on MDN
测试用例
window.onload = function() {
document.addEventListener('copy', function(e){
console.log("copy handler");
if (document.getElementById("enableHandler").checked) {
e.clipboardData.setData('text/plain', 'Current time is ' + new Date());
e.preventDefault(); // default behaviour is to copy any selected text
}
// This is just to simplify testing:
setTimeout(function() {
var tb = document.getElementById("target");
tb.value = "";
tb.focus();
}, 0);
});
document.getElementById("execCopy").onclick = function() {
document.execCommand('copy'); // only works in click handler or other user-triggered thread
}
document.getElementById("synthEvt").onclick = function() {
var e = new ClipboardEvent("copy", {dataType: "text/plain", data:"bar"});
document.dispatchEvent(e);
}
}
<html>
<input id="enableHandler" type="checkbox" checked>
<label for="enableHandler">Run clipboardData.setData('text/plain', ...) in the "copy" handler</label>
<p>Try selecting this text and triggering a copy using</p>
<ul>
<li><button id="execCopy">document.execCommand('copy')</button> - should work.</li>
<li><button id="synthEvt">document.dispatchEvent(clipboardEvent)</button> - should NOT work</li>
<li>with keyboard shortcut - should work</li>
<li>or from the context menu - should work</li>
</ul>
<p>If the "copy" handler was triggered, the focus will move to the textbox below automatically, so that you can try pasting from clipboard:</p>
<input type="text" id="target" size="80">
异步剪贴板API将提供一种更简单的方式来管理剪贴板
实现后,navigator.clipboard
会让你这样写代码:
navigator.clipboard.writeText('Text to be copied')
.then(() => {
console.log('Text copied to clipboard');
})
.catch(err => {
// This can happen if the user denies clipboard permissions:
console.error('Could not copy text: ', err);
});
Chrome 66 开始发布部分实施,他们已经发布了 an article about the new API。
您也可以将它变成一个调用自己的处理程序并将其删除的函数
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');
}
将元素id与复制事件绑定,然后获取选中的文本。您可以替换或修改文本。获取剪贴板并设置新文本。要获得准确的格式,您需要将类型设置为 "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();
});
为此,我们可以使用浏览器API。它对我有用
async copyClipboard(string){
await navigator.clipboard.writeText(string);
console.log("Text copied");
}
我看了很多帖子,但找不到以下两个问题的明确当前答案,因为标准和浏览器支持似乎一直在不断变化。
根据标准,在 'copy' 事件处理程序中使用 event.clipboardData.setData 更改剪贴板是否是合法操作?
Chrome/FF/Safari/IE/ChromeiOS/Android/iPhones 的最新版本是否正确支持此功能?
剪贴板 API 截至 2016 年确实在积极开发,但此后情况稳定下来:
支持使用 event.clipboardData.setData()
规范允许在 'copy'
事件处理程序中使用 event.clipboardData.setData()
更改剪贴板(只要事件不是 synthetic)。
请注意,您需要阻止事件处理程序中的默认操作,以防止您的更改被浏览器覆盖:
document.addEventListener('copy', function(e){
e.clipboardData.setData('text/plain', 'foo');
e.preventDefault(); // default behaviour is to copy any selected text
});
要触发复制事件,请使用 execCommand
如果需要触发复制事件(而不只是处理用户通过浏览器发出的复制请求UI),则必须使用document.execCommand('copy')
。它只适用于某些处理程序,例如 click
处理程序:
document.getElementById("copyBtn").onclick = function() {
document.execCommand('copy');
}
现代浏览器支持这两种方法
- Firefox 在
copy
/cut
/paste
事件中同时支持clipboardData
(since Firefox 22) andexecCommand('copy')
from user actions (since Firefox 41) - Chrome 也支持两者(后者是 added in Chrome 43 - or perhaps 42?)
- caniuse.com claims that Safari 12 has complete support, 9.1 及以下版本不支持
execCommand('copy')
. - MS Edge Platform Status 列出 IE/Edge 截至 2019 年支持剪贴板 APIs,这与首次撰写此答案时(2016 年)不同。
https://github.com/garykac/clipboard/blob/master/clipboard.md 与 execCommand(cut / copy / paste)
.
您可以使用下面的代码片段对此进行测试,请对结果发表评论。
更多资源
- 规格:Clipboard API and events
- The Definitive Guide to Copying and Pasting in JavaScript (2014) - 有关浏览器中剪贴板 API 互操作性的更多信息,包括支持 "copy"/"paste" 事件而不选择和支持多个格式。
- Pages tagged "Clipboard API" on MDN
测试用例
window.onload = function() {
document.addEventListener('copy', function(e){
console.log("copy handler");
if (document.getElementById("enableHandler").checked) {
e.clipboardData.setData('text/plain', 'Current time is ' + new Date());
e.preventDefault(); // default behaviour is to copy any selected text
}
// This is just to simplify testing:
setTimeout(function() {
var tb = document.getElementById("target");
tb.value = "";
tb.focus();
}, 0);
});
document.getElementById("execCopy").onclick = function() {
document.execCommand('copy'); // only works in click handler or other user-triggered thread
}
document.getElementById("synthEvt").onclick = function() {
var e = new ClipboardEvent("copy", {dataType: "text/plain", data:"bar"});
document.dispatchEvent(e);
}
}
<html>
<input id="enableHandler" type="checkbox" checked>
<label for="enableHandler">Run clipboardData.setData('text/plain', ...) in the "copy" handler</label>
<p>Try selecting this text and triggering a copy using</p>
<ul>
<li><button id="execCopy">document.execCommand('copy')</button> - should work.</li>
<li><button id="synthEvt">document.dispatchEvent(clipboardEvent)</button> - should NOT work</li>
<li>with keyboard shortcut - should work</li>
<li>or from the context menu - should work</li>
</ul>
<p>If the "copy" handler was triggered, the focus will move to the textbox below automatically, so that you can try pasting from clipboard:</p>
<input type="text" id="target" size="80">
异步剪贴板API将提供一种更简单的方式来管理剪贴板
实现后,navigator.clipboard
会让你这样写代码:
navigator.clipboard.writeText('Text to be copied')
.then(() => {
console.log('Text copied to clipboard');
})
.catch(err => {
// This can happen if the user denies clipboard permissions:
console.error('Could not copy text: ', err);
});
Chrome 66 开始发布部分实施,他们已经发布了 an article about the new API。
您也可以将它变成一个调用自己的处理程序并将其删除的函数
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');
}
将元素id与复制事件绑定,然后获取选中的文本。您可以替换或修改文本。获取剪贴板并设置新文本。要获得准确的格式,您需要将类型设置为 "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();
});
为此,我们可以使用浏览器API。它对我有用
async copyClipboard(string){
await navigator.clipboard.writeText(string);
console.log("Text copied");
}