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(); }

CodePudding user response：

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:[email protected]" id="a1">[email protected]</a>
    <button onclick="copyToC()" >Copy</button>
 </td>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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:[email protected]" id="a1">[email protected]</a>
        <button onclick="copyToC(this)" >Copy</button>
     </td>
    
     <td class="col-md-3 contactTable">
        <a href="mailto:[email protected]" id="a2">[email protected]</a>
        <button onclick="copyToC(this)" >Copy</button>
     </td>
     
     <td class="col-md-3 contactTable">
        <a href="mailto:[email protected]" id="a3">[email protected]</a>
        <button onclick="copyToC(this)" >Copy</button>
     </td>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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

Like this.