從textarea復制到剪貼板問題javascript

Question

我有兩個問題：Java腳本不適用於IE Edge，無法復制（IE11 / Firefox和Chrome有效）。 如果我將其更改為<p>或<span>則該問題與textarea有關。

我遇到的第二個問題是，當我將信息粘貼到郵件中（瀏覽器IE，Firefox，Chrome）時，我得到了屏幕截圖（參見圖片）。 如果我將其粘貼到記事本中，則會得到正確的輸出

任何建議都支持可以更改的內容或為什么會這樣？

  $('.btn').on('click', function(){ element = $(this).closest('td').prev('td')[0]; var selection = window.getSelection(); var range = document.createRange(); range.selectNodeContents(element); selection.removeAllRanges(); selection.addRange(range); try { var successful = document.execCommand('copy'); if(successful) { $('.res').html("Value Copied"); window.setTimeout(function() { $(".res").fadeTo(1500, 2000).slideUp(1500, function(){ }); }, 100); } else { $('.res').html("Unable to copy!");} } catch (err) { $('.res').html(err); } }); 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <div id="alert_message" class="res" style=" color:#FF0000; font-size:10px; font-weight:bold"></div> <td><textarea></textarea></td> <td><button type="button" class="btn pull-right btn-success btn-sm" title="Copy Information"><span class="glyphicon glyphicon-copy" aria-hidden="true"></span></button></td> 

當我復制到郵件鏈中時，為什么會得到屏幕截圖而不是文本？

Answer 1

您是否要僅復制textarea中的文本？ 如果是，請嘗試這樣的操作（我將id添加到textarea中以使其更簡單）：

    <script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
    <textarea id="note"></textarea>
   <button type="button" class="btn pull-right btn-success btn-sm" title="Copy Information"><span class="glyphicon glyphicon-copy" aria-hidden="true"></span></button>

$('.btn').on('click', function(){
    var note = $("textarea#note").val();
    CopyToClipboard(note);
// ...
// rest of your code with messages
// ...
});

function CopyToClipboard(note) {
    function listener(e) {
        e.clipboardData.setData("text/html", note);
        e.clipboardData.setData("text/plain", note);
        e.preventDefault();
    }
    document.addEventListener("copy", listener);
    document.execCommand("copy");
    document.removeEventListener("copy", listener);
}

提琴手

我認為它會將屏幕快照插入電子郵件，因為您復制帶有所有標簽的頁面HTML，而不僅僅是文本區域內的文本。