javascript - 复制文本到带有按钮和 JS 的剪贴板？

Question

我的 html 中有这段文字：

<button>copy text!</button>
<p>blah</p>

我希望在单击按钮时将 p 标签中的文本复制到剪贴板。阳光下的每个在线教程都在谈论使用 textArea 标签，但我不想使用这些。为什么不能直接从 p 标签中以这种方式复制？

标签： javascripthtml

Answer 1

您现在可以在不使用 textarea 元素的情况下使用剪贴板 API 写入剪贴板（请注意，它目前处于工作草稿状态，在所有常用浏览器中都支持，除了 IE）： Clipboard.writeText()

<button>copy text!</button>
<p>blah</p>

const button = document.querySelector( 'button' );
const elementToCopy = document.querySelector( 'p' );
const textToCopy = elementToCopy.innerText;

function copy ( text ) {
  navigator.clipboard.writeText( text )
}

button.addEventListener( 'click' , () => {
  copy( textToCopy )
})

您现在应该能够将您的内容p复制到剪贴板。