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

Fiddler

我认为它是将屏幕截图插入电子邮件，因为您复制的页面 HTML 包含所有标签，而不仅仅是文本区域内的文本。

从 textarea 复制到剪贴板问题 javascript

Copy to clipboard issue javascript from textarea

javascript

textarea