Click button copy to clipboard using js

Question

I am trying to copy email text in html, that email text is in a href tag.

Means when any user click on icon near to email text then it should be copied only email value but it is not working.

Instead of only email my code is copying full js function text, below is full code and also output what is coming when we click on copy icon.

Below is full code.

<td class="col-md-3 contactTable">
                    <a href="mailto:@Model.UsersEmail[item.ID]" id="a1">@Model.UsersEmail[item.ID]</a>
                    <i class="fa fa-copy" onclick="copyToC('#a1')" style="font-size:17px;"></i>
                </td>

<script type="text/javascript">

    function copyToC(element) {
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val($(element).text()).select();
        document.execCommand("copy");
        $temp.remove();
    }

Below is copied text when we click on copy icon:

<script type="text/javascript"> function copyToC(element) { var $temp = $("<input>"); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); }

TBA · Accepted Answer · 2021-10-24T11:52:17.397

Instead of the button, just add your icon.

The below code is for copying a single mail address:

function copyToC() {
    var copyText =  document.getElementById('a1').innerHTML;

   document.addEventListener('copy', function(e) {
      e.clipboardData.setData('text/plain', copyText);
      e.preventDefault();
   }, true);

   document.execCommand('copy');  
   console.log('copied text : ', copyText);
   alert('copied text: ' + copyText); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="col-md-3 contactTable">
    <a href="mailto:abc@gmail.com" id="a1">def@gmail.com</a>
    <button onclick="copyToC()" >Copy</button>
 </td>

Below code will copy each row's each mail address:

 function copyToC(element) {
       var aId = element.previousElementSibling.id;
       var copyText =  document.getElementById(aId).innerHTML;

       document.addEventListener('copy', function(e) {
          e.clipboardData.setData('text/plain', copyText);
          e.preventDefault();
       }, true);

       document.execCommand('copy');  
       console.log('copied text : ', copyText);
       alert('copied text: ' + copyText);
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   
    <td class="col-md-3 contactTable">
        <a href="mailto:abc@gmail.com" id="a1">abc@gmail.com</a>
        <button onclick="copyToC(this)" >Copy</button>
     </td>
    
     <td class="col-md-3 contactTable">
        <a href="mailto:def@gmail.com" id="a2">def@gmail.com</a>
        <button onclick="copyToC(this)" >Copy</button>
     </td>
     
     <td class="col-md-3 contactTable">
        <a href="mailto:ijk@gmail.com" id="a3">ijk@gmail.com</a>
        <button onclick="copyToC(this)" >Copy</button>
     </td>

Yes it is working. But in my case this email text is coming from foreach loop. So it has more then one rows. But using this code every time I got copied first email id..if I click on icon of second email row then also I am getting copied first row email id. Any idea on this. — Sami In, Oct 24 '21 at 10:39
Do you want to copy all the mail addresses with a single button or different icons for copying different mail addresses? — TBA, Oct 24 '21 at 10:41
yes it is working fine..You saved my day..many thanks for your all help.. — Sami In, Oct 24 '21 at 12:21

score 1 · Answer 2 · answered Oct 24 '21 at 09:58

I think you can not get the value from a link. but yes you can get the value from an input field.

Like this.

<input type="text" placeholder="Type something..." id="myInput">
<button type="button" onclick="getInputValue();">Get Value</button>

<script>
    function getInputValue(){
        // Selecting the input element and get its value 
        var inputVal = document.getElementById("myInput").value;
        
        // Displaying the value
        alert(inputVal);
    }
</script>

But I want to get value from a link so what to do for that..I don't have input box — Sami In, Oct 24 '21 at 10:05

Click button copy to clipboard using js

2 Answers2