1分钟后用Javascript清除剪贴板

时间:2019-03-01 23:46:08

标签: javascript clipboard

我当前正在使用以下代码将文本复制到剪贴板:

navigator.clipboard.writeText(element.value).then(function() {
    /* clipboard successfully set */
}, function() {
    /* clipboard write failed */
    console.log('Copy to clipboard failed!');
});

如果成功将数据复制到剪贴板,我需要在1分钟后自动清除剪贴板。

我尝试使用setTimeout()方法,但是从setTimeout调用剪贴板时写入剪贴板失败。

此外,如果我使用的是execCommand('copy')方法,则会收到错误消息: document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler.

我正在尝试使其在Firefox中运行。

我要放入setTimeout()中的代码如下:

setTimeout(function() {
    navigator.clipboard.writeText('').then(function() {
        /* Successfully cleared clipboard */
    }, function() {
        /* Failed to clear clipboard */
    }
}, 60000);

1 个答案:

答案 0 :(得分:3)

Firefox要求该命令来自用户事件,例如click。这就是为什么它在处理程序中不起作用。 (您不希望在其中粘贴一些恶意javascript数据,对吧?)

确切的措辞是命令必须从中调用

  

由用户生成的简短事件处理程序

解决方法

1个假人input elementdocument.execCommand("copy")

使用具有单个空格作为值的虚拟输入元素,并使用其他API来选择它并将其复制到剪贴板。

function clearClipboardFromSetTimeout() {
  // This should work but does not
  //if (document.selection) document.selection.empty()
  //else window.getSelection().removeAllRanges()

  // Create a dummy input to select
  var tempElement = document.createElement("input");
  tempElement.style.cssText = "width:0!important;padding:0!important;border:0!important;margin:0!important;outline:none!important;boxShadow:none!important;";
  document.body.appendChild(tempElement);
  tempElement.value = ' ' // Empty string won't work!
  tempElement.select();
  document.execCommand("copy");
  document.body.removeChild(tempElement)
}

function doIt() {
  navigator.clipboard
    .writeText("hello")
    .then(_ =>
      navigator.clipboard.readText().then(text => console.log("before", text))
    );

  setTimeout(() => {
    clearClipboardFromSetTimeout()
    navigator.clipboard.readText().then(text => console.log("after", text));
  }, 2000);
}
<div>This will Snippet will not work in Firefox, but the <em>clearClipboardFromSetTimeout</em> method will.</div>

<button onclick='doIt()'>Set Then Clear In setTimeOut</button>

2 Flash

一个骇人的解决方法是使用Flashhttps://brooknovak.wordpress.com/2009/07/28/accessing-the-system-clipboard-with-javascript/

3欺骗点击处理程序

还有一些方法可以保存用户事件中的click上下文,然后使用该上下文触发处理程序中的另一个click事件,进而调用您的代码。

4浏览器刷新

我不确定浏览器刷新是否会清除剪贴板,但是如果这样做,则可以将状态保存到本地存储中,然后强制刷新。