基本复制到剪贴板 html

Question

我是编程新手，我有基本的 HTML 技能。我正在创建一个基本网站，我在一个段落中有信息，这些信息由 <br> 标记分隔。我希望添加一个 "copy to clipboard" 按钮和功能，以便将 16 行信息保存到剪贴板。

<p>
this is the 1st line<br>
this is the 2nd line<br>
...
this is the 16th line [copy to clipboard]
<p>

Answer 1

在支持document.execCommand('copy') and document.execCommand('cut')的浏览器中，复制到剪贴板非常简单；你只需做这样的事情：

var copyBtn = document.querySelector('#copy_btn');
copyBtn.addEventListener('click', function () {
  var urlField = document.querySelector('#url_field');
  // select the contents
  urlField.select();     
  document.execCommand('copy'); // or 'cut'
}, false);

<input id="url_field" type="url" value="">
<input id="copy_btn" type="button" value="copy">

以上内容直接抄袭自JavaScript Copy to ClipBoard (without Flash) using Cut and Copy Commands with document.execCommand()。

如果您按 运行代码片段 ，然后按复制，您会看到 URL 在输入字段中（这个 Whosebug 问题的 URL），并将其复制到剪贴板。

基本复制到剪贴板 html

Copy to clipboard for basic html

html

javascript

clipboard