内容隐藏

1) 表中的内容

2) 使用JavaScript将文本复制到剪贴板

2.1) 从Textarea复制文本到剪贴板

2.2) 从Div标签复制文本到剪贴板

3) 使用ClipboardJS将文本复制到剪贴板

3.1) 安装依赖项

3.2) 使用ClipboardJS从输入字段复制文本到剪贴板

3.3) 从HTML kdb使用ClipboardJS将文本复制到剪贴板

在本教程中，我们将看到如何使用Javascript和JQuery将文本复制到剪贴板。该浏览器扩展将“复制到剪贴板”按钮添加到了每个代码块上。的GitHub, MDN, 堆栈溢出, StackExchange, npm，乃至中.

表中的内容

使用JavaScript将文本复制到剪贴板
使用ClipboardJS将文本复制到剪贴板

查看有关如何使用Java脚本将文本复制到剪贴板的演示。

查看有关如何使用ClipboardJS将文本复制到剪贴板的演示。

使用JavaScript将文本复制到剪贴板

从Textarea复制文本到剪贴板

在此示例中，我们使用javascript的帮助将文本从textarea字段复制到剪贴板。 copyToClipboard_textArea 功能。


function copyToClipboard_textArea() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  document.execCommand("Copy");
}

显示需要复制的内容

标记


<textarea id="myInput_textArea" rows="4" cols="50"> Geeks Trick - Copy Code From Text Area</textarea>
<br>
<button class="btn btn-primary" onclick="copyToClipboard_textArea()">Copy text</button>

从Div标签复制文本到剪贴板

在此示例中，我们使用javascript的帮助将文本从div标签复制到剪贴板中 copyToClipboard_div 功能。


function copyToClipboard_div() {
   // Create a new textarea element and give it id='t'
  let textarea = document.createElement('textarea')
  textarea.id = 't'
  // Optional step to make less noise on the page, if any!
  textarea.style.height = 0
  // Now append it to your page somewhere, I chose
  document.body.appendChild(textarea)
  // Give our textarea a value of whatever inside the div of id=containerid
  textarea.value = document.getElementById("myInput").innerText
  // Now copy whatever inside the textarea to clipboard
  let selector = document.querySelector('#t')
  selector.select()
  document.execCommand('copy')
  // Remove the textarea
  document.body.removeChild(textarea)
}

显示需要复制的内容

标记


<div id="myInput_div" style="background-color:yellow;padding:10px;" >
  Geeks Trick - Copy Code From Div Tag 
</div> 
<button id="my_button" class="btn btn-primary" onclick="copyToClipboard_div()">Copy text</button>

浏览器支持：

ChromeFirefoxOperaIESafari

43.0.2356	41.0	30	9	不支持

使用ClipboardJS将文本复制到剪贴板

如今，大多数使用复制和复制网站上提到的内容（例如复制代码集）功能的网站都带有一些引号。最好的部分是所有浏览器都受剪贴板JS 插入。

安装依赖项

依存关系


<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>

使用ClipboardJS从输入字段复制文本到剪贴板

让我们用按钮创建一个输入字段，该字段将从输入文件中复制内容

标记


<h2> 1. Copy text from the Input field</h2>
<input type="text" id="example1" value="//quandany.com" class="form-control">
<button class="btn copyButton " data-clipboard-target="input#example1" ata-clipboard-action="example1" type="button">
  <i class="far fa-copy"></i>
</button>

现在，让我们编写一些脚本，将内容复制到剪贴板并获取响应，即 错误 或者 成功 信息


var clipboard = new Clipboard('.copyButton');
clipboard.on('success', function(e) {
    console.log(e);
});
clipboard.on('error', function(e) {
    console.log(e);
});

从HTML kdb使用ClipboardJS将文本复制到剪贴板

相似地，我们可以从HTML标签（例如kdb）中选择并复制一些内容

标记


<h2>2. Copy text from the kbd tag</h2>
<label> Product Number : </label>
<kbd id="copy"> 12743-64833-383993-646383 </kbd>
<button class="copyButton btn btn-default" id="copyButtonId" data-clipboard-action="copy" data-clipboard-target="kbd#copy">
  <i class="far fa-copy"></i>
</button>

获取更多帖子的JavaScript

使用Javascript和ClipboardJS将文本复制到剪贴板