document.execCommand('copy')命令在Chrome中不起作用

Question

HTML

<input type="text" id="clipboard">
<button class="share-button">share</button>

JS

  text = 'text to be copied';

  document.querySelector('.share-button').addEventListener('click', () => {
      var element = document.querySelector('#clipboard');
      element.setAttribute("value", text);
      console.log(element.value);
      element.select();
      document.execCommand('copy');

  });

CSS

#clipboard {
  position: absolute;
  visibility: hidden;
}

我正在尝试将文本复制到剪贴板，但我不明白我的代码有什么问题。我从MDN文档中复制了代码。

当我做这些事情的时候，它不工作

#clipboard {
  position: absolute;
}

// or

#clipboard {
  visibility: hidden
}

// or

#clipboard {
  display: none
}

Answer 1

​

const share_btn = document.querySelector('.share-button');

function copy_to_clipboard(stritem){
    const el = document.createElement('textarea');
    el.value = stritem;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
    window.alert('Successfully copied to your clipboard!'); 
}

text = 'text to be copied';
share_btn.addEventListener('click', ()=>{copy_to_clipboard(text);});

<button class="share-button">share</button>

​