Блог

У меня есть функция копирования в моем коде, где кнопка копирования копирует данные текстовой области в буфер обмена. Код и кнопка для него отлично работают для первой текстовой области, но кнопки против 2 и оставшихся текстовых областей почему-то не выполняют эту функцию.

Вот мой код

HTML:

 <input id="input_1" class="text-area-main input_mainn" type="text" placeholder="Input Goes Here" oninput="funcinput1()"> //input field
 

Поле ввода 1

 <textarea id="output_1" class="text-area-main output_copy"></textarea> //field whose data needs to be copied

<button class="ml-auto copy-btn btn_cpy col-md-1 col-12 button_copy integration-checklist__copy-button btn_copy" id="btn_copy" data-clipboard-text="" data-clipboard-action="copy" onclick="myFunctionCopy()">COPY</button> // copy button
 

Поле ввода 2:

 <textarea id="output_2" class="text-area-main output_copy"></textarea>

<button class="ml-auto copy-btn btn_cpy col-md-1 col-12 button_copy integration-checklist__copy-button btn_copy" id="btn_copy" data-clipboard-text="" data-clipboard-action="copy" onclick="myFunctionCopy()">COPY</button>
 

Вот JS-код:

 function myFunctionCopy() {
    var copyText = document.getElementById("output_1");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  document.execCommand("copy");
  
  var tooltip = document.getElementById("btn_copy");
  tooltip.innerHTML = "Copied"
  }
 

Я попытался изменить getElementById на getElementsByClassName и присвоить ему класс output_copy, но он по-прежнему не работает.

Помогите!

Я новичок в JS-кодировании и перепробовал несколько способов, но все еще не решил проблему.

У меня будет до 20 текстовых областей, и каждая из них будет иметь специальную кнопку копирования, поэтому мне нужно решение, которое будет копировать только значение этой конкретной текстовой области, а не другие.

Спасибо Профессионалам и Пенсионерам!

Я думаю, вы можете делать все, что хотите, используя эту библиотеку. Я использовал его раньше, и он работал для меня.

https://clipboardjs.com/

HTML :

 <!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
 

JavaScript :

 var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});
 

вам нужно сделать идентификатор переменной в функции следующим образом :

 function myFunctionCopy(outputid) {
    var copyText = document.getElementById(outputid);
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  document.execCommand("copy");
  
  var tooltip = document.getElementById("btn_copy");
  tooltip.innerHTML = "Copied"
  }
 

и в html использовать

 <input type="submit" value="copy" onClick="myFunctionCopy(output1)" />