Question

当您点击按钮时，我需要一些JavaScript来制作一些文本来复制剪贴板。我在下面附上了按钮HTML。注意：我有多个按钮。

<button id="TextToCopy"><img src="button_image.png" onclick="ClipBoard(this)"></button>

我正在考虑为每个按钮做一个这样的if语句，但不知道如何复制文本。

    function ClipBoard(x) {
if (x.id == "TextToCopy")
var copyText = "TextToCopy";

Answer 1

老问题，但是如果有人仍然有类似的问题，您可以使用 Range API，而不是创建一个临时的 Input 元素： https://developer.mozilla.org/en-US/docs/Web/API/Range

现在我们可以修改 Takit Isy 代码，使其更通用，并且可以通过其 ID 从任何节点复制：

function copyById(containerId) {
  var range_ = document.createRange(); // create new Range object
  range_.selectNode(document.getElementById(containerId)); // set our Range to contain the Node we want to copy from
  window.getSelection().removeAllRanges(); // remove any previous selections
  window.getSelection().addRange(range_); // select
  document.execCommand("copy"); // copy to clipboard
  window.getSelection().removeAllRanges(); // remove selection
}

// add onClick event handler to your button with additional function() to not invoke copyById immediately:
document.getElementById('copy-button').onclick = function() {
  copyById('to-copy');
}

<p id="to-copy">Text to copy!</p>
<button id="copy-button">Copy to clipboard</button>
<br><br>
<input placeholder="Paste here, to try!">

您还可以使用这个更通用的库（也适用于输入和 IE8）： https://github.com/bauripalash/copyer.js

这是您需要的所有代码： https://github.com/bauripalash/copyer.js/blob/master/src/copyer.js

Answer 2

我使用jQuery创建它，检查下面的代码段：

＆＃13;

$('#TextToCopy').click(function(){
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($('#mytext').text()).select();
  document.execCommand("copy");
  $temp.remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="mytext">This is a text to copy</p>
<button id="TextToCopy"><img src="button_image.png"></button>
<p>Test here</p>
<textarea></textarea>

＆＃13;

编辑：此处使用JavaScript：

＆＃13;

/*
// JQuery
$('#TextToCopy').click(function(){
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($('#mytext').text()).select();
  document.execCommand("copy");
  $temp.remove();
});
*/

// JavaScript
function copy_function(id){
  var value = document.getElementById(id).innerHTML;
  var input_temp = document.createElement("input");
  input_temp.value = value;
  document.body.appendChild(input_temp);
  input_temp.select();
  document.execCommand("copy");
  document.body.removeChild(input_temp);
};

＆＃13;

<!-- jQuery -->
<!--<p id="mytext">This is a text to copy</p>
<button id="TextToCopy"><img src="button_image.png"></button>
<p>Test here</p>
<textarea></textarea>-->

<!-- JavaScript -->
<p id="mytext">This is a text to copy</p>
<button id="TextToCopy" onclick="copy_function('mytext')"><img src="button_image.png"></button>
<p>Test here</p>
<textarea></textarea>

＆＃13;

Answer 3

您可以使用此类功能来执行此操作：

（请注意，由于您不应该使用内联JavaScript，因此我在HTML中删除了您的onclick。

＆＃13;

function Clipboard_CopyTo(value) {
  var tempInput = document.createElement("input");
  tempInput.value = value;
  document.body.appendChild(tempInput);
  tempInput.select();
  document.execCommand("copy");
  document.body.removeChild(tempInput);
}

document.querySelector('#Copy').onclick = function() {
  Clipboard_CopyTo('Text to copy!');
}

＆＃13;

<button id="Copy"><img src="button_image.png"></button>
<br><br>
<input placeholder="Paste here, to try!">

＆＃13;

此函数创建一个临时输入，在复制文本后将其删除。

希望它有所帮助。

创建没有输入文本框的复制按钮

3 个答案: