使用js單擊按鈕復制到剪貼板

我正在嘗試復制 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(); }

uj5u.com熱心網友回復：

而不是按鈕，只需添加您的圖示。

以下代碼用于復制單個郵件地址：

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>

下面的代碼將復制每一行的每個郵件地址：

 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>

uj5u.com熱心網友回復：

我認為您無法從鏈接中獲得價值。但是是的，您可以從輸入欄位中獲取值。

像這樣。????

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

標籤：javascript C＃ html 查询 。网

上一篇：jQuery-如何將驗證相同的輸入名稱添加到規則方法中？

下一篇：使用javascript更改具有相同類的所有元素的內容