Как скопировать текст, который находится в цикле for-each, в буфер обмена при нажатии на span?

Question

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

 <tbody data-bind="foreach: closedAccounts">
 <span id="a"  data-bind="text: $data.accountNo"  onclick="copyDivToClipboard()"
 data-toggle="tooltip" title="Copy to clipboard">
 </span></tbody>

функция JavaScript

   function copyDivToClipboard() {

        var range = document.createRange();
        range.selectNode(document.getElementById("a"));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
        document.execCommand("copy");
        console.log(range);
}

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

Answer 1

Вы можете сделать это, передав аргумент this в copyDivToClipboard, чтобы затем вы могли обрабатывать элемент, по которому щелкнули, в функции, тогда не будет измерено, если у ваших диапазонов одинаковый идентификатор или нет.

<tbody data-bind="foreach: closedAccounts">
     <span id="a"  data-bind="text: $data.accountNo"  onclick="copyDivToClipboard(this)"
       data-toggle="tooltip" title="Copy to clipboard">
     </span>
</tbody>

<script>
    function copyDivToClipboard(clickedspan) {
        const el = document.createElement('textarea');
        el.value = clickedspan.innerText;
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        alert("Text copied to clipboard: " + clickedspan.innerText);
    }
</script>

Этот ответ соответствует вашим требованиям, указанным в вопросе.Если вы хотите чего-то другого, отредактируйте ваш вопрос.

Answer 2

Вам необходимо использовать ключевое слово this. Передайте this в функцию onclick, и вы сможете получить доступ к элементу, по которому щелкнули, и ко всем его свойствам внутри функции.

<span id="a"  data-bind="text: someText"  onclick="copyDivToClipboard(this)"
 data-toggle="tooltip" title="Copy to clipboard">
        More Text
 </span>

<script>
function copyDivToClipboard(clickedspan) {
        console.log(clickedspan)//the html element being clicked
        console.log(clickedspan.innerText)//your text here
        console.log(clickedspan.dataset.bind)//your data attribute
}
</script>