1

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(); }
Improve this question
0

2 Answers 2

Reset to default
3

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>

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

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.
Do you want to copy all the mail addresses with a single button or different icons for copying different mail addresses?
different icons for copying different mail address
@SamiIn have a look now
yes it is working fine..You saved my day..many thanks for your all help..
|
1

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>
Improve this answer

1 Comment

But I want to get value from a link so what to do for that..I don't have input box

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.