Javascript очистить буфер обмена через 1 минуту

Question

В настоящее время я копирую текст в буфер обмена, используя следующий код:

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);

Answer 1

Firefox требует, чтобы команда прибыла из пользовательского события, такого как щелчок.Вот почему это не работает с обработчиком.(Вы бы не хотели, чтобы там были какие-то посторонние вставки данных JavaScript, верно?)

Точная формулировка - команда должна вызываться из

кратковременного пользовательского обработчика событий

Временные решения

1 Пустышка input element и document.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

Хакерский обходной путь должен использовать Flash: https://brooknovak.wordpress.com/2009/07/28/accessing-the-system-clipboard-with-javascript/

3 Обманивание обработчика кликов

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

4 Обновление браузера

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