javascript - 从文本区域复制到剪贴板问题 javascript

Question

我有两个问题:Java 脚本不适用于 IE Edge，无法复制(IE11/Firefox 和 Chrome 可以使用)。如果我将其更改为<p>，则问题与textarea有关。或<span>有用。

我遇到的第二个问题是，当我将信息传递到邮件中(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

您是否想仅从文本区域复制文本？如果是，请尝试这样的操作(我将 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，而不仅仅是文本区域内的文本。