单击按钮使用js复制到剪贴板[重复]答案

【问题标题】：Click button copy to clipboard using js [duplicate]单击按钮使用js复制到剪贴板[重复]
【发布时间】：2021-12-10 04:51:16
【问题描述】：

我正在尝试在 html 中复制电子邮件文本，该电子邮件文本位于 href 标记中。

意味着当任何用户单击电子邮件文本附近的图标时，它应该只复制电子邮件值，但它不起作用。

我的代码不只是电子邮件，而是复制完整的 js 函数文本，下面是完整的代码，当我们单击复制图标时还会输出即将发生的内容。

以下是完整代码。

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

当我们点击复制图标时，下面是复制的文本：

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

【问题讨论】：

标签： javascript c# html jquery .net

【解决方案1】：

只需添加您的图标，而不是按钮。

以下代码用于复制单个邮件地址：

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>

下面的代码将复制每一行的每个邮件地址：

 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>

【讨论】：

是的，它正在工作。但就我而言，此电子邮件文本来自 foreach 循环。所以它有不止一行。但是每次我复制第一个电子邮件 ID 时使用此代码..如果我点击第二个电子邮件行的图标，那么我也会复制第一行电子邮件 ID。对此有任何想法。
你想用一个按钮复制所有的邮件地址，还是用不同的图标复制不同的邮件地址？
复制不同邮件地址的不同图标
@SamiIn 现在看看
是的，它工作正常..您拯救了我的一天..非常感谢您的所有帮助..

【解决方案2】：

我认为您无法从链接中获取价值。但是是的，您可以从输入字段中获取值。

像这样。??

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

【讨论】：

但我想从链接中获取价值，所以该怎么做..我没有输入框