编程语言
首页 > 编程语言> > javascript – 复制事件中的event.clipboardData.setData

javascript – 复制事件中的event.clipboardData.setData

作者:互联网

我看过很多帖子但是找不到以下两个问题的明确答案,因为看起来标准和浏览器支持一直在不断变化.

>根据标准,在’copy’事件处理程序中使用event.clipboardData.setData更改剪贴板是合法操作吗?
>最新版本的Chrome / FF / Safari / IE / Chrome iOS / Android / iPhone是否支持此功能?

谢谢!

解决方法:

截至2016年,剪贴板API确实在积极开发中,但这是我对当前事态的理解.

支持使用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’).它只适用于某些处理程序,例如单击处理程序:

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

浏览器支持各不相

> Firefox支持复制/剪切/粘贴事件(since Firefox 22)中的clipboardData和用户操作中的execCommand(‘copy’)(since Firefox 41)
> Chrome也同时支持(后者为added in Chrome 43 – 或perhaps 42?)
> caniuse.com claims that Safari (as of 9.1) doesn’t support the latter.
> MS Edge Platform Status将IE / Edge列为不支持剪贴板API,此时细节链接已被破坏.

https://github.com/garykac/clipboard/blob/master/clipboard.md具有execCommand的兼容性表(剪切/复制/粘贴).

您可以使用下面的代码段对此进行测试,请对结果进行评论.

更多资源

>规格:Clipboard API and events
> The Definitive Guide to Copying and Pasting in JavaScript(2014) – 有关浏览器中剪贴板API互操作性的更多信息,包括支持“复制”/“粘贴”事件,而无需选择和支持多种格式.
> 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">

Async Clipboard 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.

标签:javascript,html5,javascript-events,w3c,clipboarddata
来源: https://codeday.me/bug/20190926/1821742.html