用于将两个不同字段复制到剪贴板的两个按钮答案

【问题标题】：Two button for copy two different fields to clipboard用于将两个不同字段复制到剪贴板的两个按钮
【发布时间】：2020-06-17 16:38:30
【问题描述】：

我有两个输入文本的字段，每个字段都有一个复制到剪贴板按钮，复制工作但复制相同的文本：

    <div class="class="mov-label">
        <i class="mov-label"></i> <b>Link first</b>
    </div>
    <input type="text" value="[xfvalue_link]" id="myInput" readonly>
    <div class="fb-submit flex-row-2"><button onclick="myFunction()">Copy link</button>
        <form>
            <input type="button" onclick="window.location.href = '[xfvalue_link]';" value="Open in application"/>
        </form>
    </div>
    <br>
    <div class="class="mov-label">
        <i class="mov-label"></i> <b>Link second</b>
    </div>
    <input type="text" value="[xfvalue_link-2]" id="myInput" readonly>
    <div class="fb-submit flex-row-2"><button onclick="myFunction()">Copy link</button>
        <form>
            <input type="button" onclick="window.location.href = '[xfvalue_link-2]';" value="Open in application"/>
        </form>
    </div>

和 JS

<script>
function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  alert("Copied: " + copyText.value);
}
</script>

【问题讨论】：

两个输入的 id 相同 - id 应该是唯一的。当您调用 document.getElementById("myInput"); 时，它只会找到第一个。

标签： javascript copy clipboard clipboard.js

【解决方案1】：

您对两个文本框使用相同的 id - myInput。为每个文本框分配唯一的 id 并将它们传递给 myFunction()。

<input type="text" value="[xfvalue_link]" id="myInput1" readonly>
<button onclick="myFunction('myInput1')">
<input type="text" value="[xfvalue_link-2]" id="myInput2" readonly>
<button onclick="myFunction('myInput2')">

function myFunction(myID){
   var copyText = document.getElementById(myID);
}

【讨论】：

【解决方案2】：

这是解决方案：

<div class="class="mov-label">
    <i class="mov-label"></i> <b>Link first</b>
</div>
<input type="text" value="[xfvalue_link]" id="myInput" readonly>
<div class="fb-submit flex-row-2"><button onclick="myFunction()">Copy link</button>
    <form>
        <input type="button" onclick="window.location.href = '[xfvalue_link]';" value="Open in application"/>
    </form>
</div>
<br>
<div class="class="mov-label">
    <i class="mov-label"></i> <b>Link second</b>
</div>
<input type="text" value="[xfvalue_link-2]" id="myInput1" readonly>
<div class="fb-submit flex-row-2"><button onclick="myFunction1()">Copy link</button>
    <form>
        <input type="button" onclick="window.location.href = '[xfvalue_link-2]';" value="Open in application"/>
    </form>
</div>

和JS

<script>
function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  alert("Copied: " + copyText.value);
}
</script>
<script>
function myFunction1() {
  var copyText = document.getElementById("myInput1");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  alert("Copied: " + copyText.value);
}
</script>

也许有人会有用

【讨论】：