How to copy text, which is in a for-each loop, to clipboard when span is clicked?

Question

I trying to copy data to clipboard , I want it so that whenever a user clicks on a span that contain text, that specific text it is matched up with is copied to the clipboard.

 <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

   function copyDivToClipboard() {

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

I am having trouble with copying that specific text that matches a span since the text does not have a specific id or class name because it is just printing text as it goes through the loop, so they all have the same id. So how would I specify a specific text with that span, since the spans could get pressed in any order?

score 1 · Answer 1 · answered Mar 05 '19 at 14:21

1

You need to use the this keyword. Pass this into your onclick function and you will be able to access the clicked element and all of its properties inside the function.

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

answered Mar 05 '19 at 14:21

cvb

723
7
21

thank you Cobly Boren , it show in the console the data for each item , but it print only the first element – ali Mar 05 '19 at 14:30
@ali, I don't understand what you mean. You do realize that you can't have the same Id on all of the elements and then get the element by Id correct? You need to use 'this'. You should update your question with the code you are using now if your still having issues. – cvb Mar 05 '19 at 14:59
Cobly Boren ,what I need is when I press on a data under foreach this data copied to clipboard , what your solution do is that it copy only the first one for example if I select the second data under foreach it copy the first data – ali Mar 07 '19 at 07:15

habib · Answer 2 · 2019-03-06T14:47:12.900

You can do this by passing this argument into copyDivToClipboard so then you can handle your clicked item in the function, then it's not metered weather your spans have the same id or not.

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

This answer is according to your requirements specified in the question. If you want something else to achieve please edit your question.

This is almost exactly my answer – cvb Mar 07 '19 at 20:40 — cvb, Mar 07 '19 at 20:40

How to copy text, which is in a for-each loop, to clipboard when span is clicked?

2 Answers2