Две кнопки для копирования двух разных полей в буфер обмена - PullRequest
Новая
       89

Две кнопки для копирования двух разных полей в буфер обмена

0 голосов
/ 17 июня 2020

У меня есть два поля с вводимым текстом, для каждого есть кнопка копирования в буфер обмена, копирование работает, но копирует один и тот же текст: 

    <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>

Ответы [ 2 ]

0 голосов
/ 17 июня 2020

Это решение: 

<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>

Может кому будет полезно

0 голосов
/ 17 июня 2020

Вы используете одинаковый идентификатор для обоих текстовых полей - myInput . Назначьте уникальный идентификатор для каждого текстового поля и передайте их в 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);
}
...