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