Как объединить несколько функций копирования в буфер обмена?
Я пытаюсь понять, как скопировать несколько кнопок «Копировать в буфер обмена» в один скрипт.
На моей странице есть динамические текстовые области, которые заполняются по мере того, как пользователь заполняет форму, и каждая текстовая область имеет собственную кнопку копирования в буфер обмена:
function CopyTemplateField1() {
var copyText = document.getElementById("TemplateField1");
copyText.select();
navigator.clipboard.writeText(copyText.value);
}
function CopyTemplateField2() {
var copyText = document.getElementById("TemplateField2");
copyText.select();
navigator.clipboard.writeText(copyText.value);
}
function CopyTemplateField3() {
var copyText = document.getElementById("TemplateField3");
copyText.select();
navigator.clipboard.writeText(copyText.value);
}<tr>
<td><textarea id = "TemplateField1"></textarea></td>
<td><img src = "copybutton.png" onClick = "CopyTemplateField1();"></td>
</tr>
<tr>
<td><textarea id = "TemplateField2"></textarea></td>
<td><img src = "copybutton.png" onClick = "CopyTemplateField2();"></td>
</tr>
<tr>
<td><textarea id = "TemplateField3"></textarea></td>
<td><img src = "copybutton.png" onClick = "CopyTemplateField3();"></td>
</tr>Я по-прежнему хочу, чтобы каждая кнопка копирования копировала текст из связанной текстовой области, но три отдельные функции были объединены в одну функцию, которая будет различать, какая кнопка нажата, и копировать этот текст в буфер обмена.
Я пытался использовать if/else, но продолжал выдавать ошибки. Искал похожие статьи, но не нашел ничего подходящего. Если есть другой метод, но вы предпочитаете использовать JavaScript, поскольку страница довольно упрощена.
Используйте параметры функции: onClick = "copyValue('TemplateField2');"
Почему вы использовали Function с заглавной буквой F? Я удивлен, что это работает на вашей стороне. Мне пришлось отредактировать его на function, чтобы фрагмент работал.
Обратите внимание, что navigator.clipboard.writeText(copyText.value) заблокирован при stackoverflow, поэтому фрагмент не будет работать таким образом. Вместо этого вы можете найти элемент textarea и попытаться textarea.select(); document.execCommand('copy'); воспроизвести его здесь. navigator.clipboard.writeText() требует более безопасного контекста, чем фрагменты на Stackoverflow, и является современным и лучшим подходом.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Использование параметров функции кажется лучшим вариантом.
<tr>
<td><textarea id = "TemplateField1"></textarea></td>
<td><img src = "copybutton.png" onClick = "CopyTemplateField(1);"></td>
</tr>
<tr>
<td><textarea id = "TemplateField2"></textarea></td>
<td><img src = "copybutton.png" onClick = "CopyTemplateField(2);"></td>
</tr>
<tr>
<td><textarea id = "TemplateField3"></textarea></td>
<td><img src = "copybutton.png" onClick = "CopyTemplateField(3);"></td>
</tr>
function CopyTemplateField(n) {
var copyText = document.getElementById("TemplateField" + n);
copyText.select();
navigator.clipboard.writeText(copyText.value);
}
Вместо получения текстового поля по идентификатору выберите его из структуры разметки. Что-то вроде
txtarea = e.target.closest('tr').firstElementChild.firstElementChild;. Вам необходимо передать объектeventобработчикам событий. А лучше используйте addEventListener , чтобы прикрепить события, см. также делегирование событий, чтобы упростить код.