Question

我希望能够将按钮的文本复制到剪贴板。我能够检索按钮的innerText并将其记录到控制台，但是我无法将其添加到选择中，然后最终使用'document.execCommand（“ copy”）;'将其添加到剪贴板。有什么想法吗？

$(document).ready(function() {
  $('button').on('click', function() {
    var copyText = this.innerText;
    console.log(copyText);
    copyText.select;
    document.execCommand("copy");
    /* Alert the copied text */
    alert("Copied the text: " + copyText);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>
  <ul id="test">
    <li>
      <button class="copy-button" id="button1">Test1</button>
    </li>
    <li>
      <button class="copy-button" id="button2">Test2</button>
    </li>
    <li>
      <button class="copy-button" id="button3">Test3</button>
    </li>
  </ul>
</div>

Answer 1

好吧，要在剪贴板中添加一个字符串，就必须这样做：

创建一个文本区域，将搅动添加到该文本区域，然后从那里复制，然后删除该文本区域。

希望这会有所帮助：

function copyStringToClipboard () {
       var str = document.getElementById("btn1").innerText;
       // Create new element
       var el = document.createElement('textarea');
       // Set value (string to be copied)
       el.value = str;
       // Set non-editable to avoid focus and move outside of view
       el.setAttribute('readonly', '');
       el.style = {position: 'absolute', left: '-9999px'};
       document.body.appendChild(el);
       // Select text inside element
       el.select();
       // Copy text to clipboard
       document.execCommand('copy');
       // Remove temporary element
       document.body.removeChild(el);
    }

<button onclick="copyStringToClipboard()" id = 'btn1'>Click me</button>
<input type="text" placeholder="Paste here">

Answer 2

一种execCommand方法，用于运行可操作当前可编辑区域的命令，例如form inputs或contentEditable元素。从这里execCommand

查找说明

您可以查看@Hani发表的answer，以解决此类问题，我在这里使用了 Hani 解决方案来解决您的问题。

$(document).ready(function() {
  $('button').on('click', function() {
    var copyText = this.innerText;
    // console.log(copyText);
    // copyText.select;
    // document.execCommand("copy");

    var textarea = document.createElement('textarea');
    textarea.id = 'temp_element';
    textarea.style.height = 0;
    document.body.appendChild(textarea);
    textarea.value = copyText;
    var selector = document.querySelector('#temp_element')
    selector.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>
  <ul id="test">
    <li>
      <button class="copy-button" id="button1">Test1</button>
    </li>
    <li>
      <button class="copy-button" id="button2">Test2</button>
    </li>
    <li>
      <button class="copy-button" id="button3">Test3</button>
    </li>
  </ul>
</div>

Answer 3

我认为这是最适合您的解决方案，请尝试

function CopyText(btnText,btn) {
input=$(btn).prev();
$(input).val(btnText);
    var copyText = $(input);
    copyText.select();
    document.execCommand("copy");
    alert("Copied the text: " +$(copyText).val());
}

.btns{
    position: absolute;
    width:0.1px;
    height:0.1px;
    z-index:-99999999999;
}

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
    <ul class="test">
    <li>
<input type="text" class="btns" value="">
<button onclick="CopyText(this.innerText,this)">HELLO222</button>
</li>
    <li>
<input type="text" class="btns" value="">
<button onclick="CopyText(this.innerText,this)">HELLO7777</button>
</li>
</ul>
</div>

想法是将按钮的文本作为文本框的值放置，并且此文本框必须是隐藏的，问题是复制功能不适用于“隐藏字段”，因此此问题的解决方案是设置文本框设置为非常小的尺寸，我为每个1.0px高度width1 and z-index`设置了and，并将其设置为负值，以使其半隐藏。祝你好运

Answer 4

基本上，由于不能使用button.select（），因此要创建一个可以选择的元素以复制到剪贴板。因此，通过创建一个与按钮具有相同内容的临时输入元素，可以绕开它。现在，您可以选择输入元素并简单地复制它。您可以在运行代码后直接使用“粘贴”进行测试。

在您的HTML中：

<button id='btnID'>Success</button>'

在您的JS中：

var input = document.createElement('input');
input.value = document.getElementById('btnID').innerHTML;
input.id = 'inputID';
document.body.appendChild(input);
input.select();
document.execCommand('copy');
document.body.removeChild(input);

如何将按钮的内容复制到剪贴板（JS）

4 个答案: