如何通过按钮将不同输入的值复制到剪贴板？ Java 或 Jquery（不带 execCommand）

Question

我尝试使用按钮将输入的

value

复制到剪贴板，但我不知道如何让它使用相关按钮复制值。

我知道我的错误之一是这个

document.getElementById("main")

，所以值“Main Title”总是被复制。我不知道如何复制另一个

values

。 我尝试在不使用

execCommand

的情况下做到这一点，以节省将来的麻烦。

<input type="text" id="main" value="Main Title">
<button onclick="copyCat(getAttribute('value'))">click</button>

<div class="options">
  <input type="text" id="a" value="Option A">
  <button onclick="copyCat(getAttribute('value'))">click</button>
  <input type="text" id="b" value="Option B">
  <button onclick="copyCat(getAttribute('value'))">click</button>
  <input type="text" id="c" value="Option C">
  <button onclick="copyCat(getAttribute('value'))">click</button>
</div>

<script>
    function copyCat() {
      var copyText = document.getElementById("main");
      copyText.select();
      navigator.clipboard.writeText(copyText.value);
    }
  </script>

Answer 1

要通过按钮将不同输入的值复制到剪贴板，您可以使用 Clipboard API（特别是

navigator.clipboard.writeText

方法）。

1. 更新

   copyCat()

   函数以获取表示要从中复制的输入元素的

   id

   的参数。
2. 使用此

   id

   选择适当的输入元素。
3. 获取此输入的值并将其复制到剪贴板。

这是更正后的代码：

HTML：

<input type="text" id="main" value="Main Title">
<button onclick="copyCat('main')">click</button>

<div class="options">
  <input type="text" id="a" value="Option A">
  <button onclick="copyCat('a')">click</button>
  <input type="text" id="b" value="Option B">
  <button onclick="copyCat('b')">click</button>
  <input type="text" id="c" value="Option C">
  <button onclick="copyCat('c')">click</button>
</div>

JavaScript：

function copyCat(inputId) {
  // Get the input element based on the provided ID
  var copyText = document.getElementById(inputId);
  
  // Copy the value to the clipboard
  navigator.clipboard.writeText(copyText.value).then(function() {
    console.log('Text successfully copied to clipboard!');
  }).catch(function(err) {
    console.error('Could not copy text to clipboard:', err);
  });
}

此方法不需要

document.execCommand

方法即可工作。