CTRL + C无法在隐藏的<div> </div>中工作

Question

我希望有一个功能，用户只需点击一个按钮即可复制特定内容，然后按 CTRL + C 。

如果我没有将style="display: none"放入divToCopy，以下情况有效。但是，当我放置样式时， CTRL + C 将不再有效。

＆＃13;

＆＃13;

var Clipboard = function() {

  var clipboard = {};

  clipboard.cssStyle = "";
  clipboard.cssClass = "";
  clipboard.targetId = "";

  clipboard.highlight = function(targetId) {
    // backup the styling of the target div
    clipboard.cssStyle = $("#" + targetId).attr('style');
    clipboard.cssClass = $("#" + targetId).attr('class');

    // create a ranged selection
    window.getSelection().removeAllRanges();
    if (window.getSelection) {
      console.log("has selection");
      var node = document.getElementById("divToCopy");
      var range = document.createRange();
      console.log(range);
      range.selectNodeContents(node);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
    }

    // highlight
    $("#" + targetId).css("background-color", "yellow");
  };

  clipboard.copyWithStyle = function(targetId) {
    var toCopy = $('#' + targetId).html();
    $('#divToCopy').html(toCopy);

    clipboard.targetId = targetId;
    clipboard.highlight(targetId);
  };

  clipboard.copyNoStyle = function(targetId) {
    var toCopy = $('#' + targetId).html();
    $('#divToCopy').html(toCopy);

    $('#divToCopy *').removeAttr('style');
    $('#divToCopy *').removeAttr('class');

    clipboard.targetId = targetId;
    clipboard.highlight(targetId);
  };

  $("#divToCopy").bind('copy', function() {
    $("#" + clipboard.targetId).attr('style', clipboard.cssStyle);
    $("#" + clipboard.targetId).attr('class', clipboard.cssClass);
  });

  return clipboard;
};

$(document).ready(function() {
  var c = Clipboard();
  $("#copy-with-style").click(function(event) {
    c.copyWithStyle("content");
  });

  $("#copy-no-style").click(function(event) {
    c.copyNoStyle("content");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="my-body" align="center">
  <br/>
  <div id="content" style="text-align:left; margin:0 auto; border: 1px solid black; width: 300px; padding: 5px;">
    <div style="color:red">RED by Taylor Swift</div>
    <ul>
      <li>One</li>
      <li style="font-weight:bold;">Two</li>
      <li>3</li>
      <li>Four</li>
      <li>~!@#$%^&*()______+{}[]:";'
        <>?,./"</li>
    </ul>
    <table style="border:1px solid green;">
      <tr>
        <td colspan=2>Merged</td>
        <td style="color:blue;">Blue</td>
      </tr>
      <tr>
        <td>Red</td>
        <td>Green</td>
        <td>Violet</td>
      </tr>
    </table>
  </div>
  <br/>
  <input type="button" value="Copy With Style" id="copy-with-style" />
  <input type="button" value="Copy Without Style" id="copy-no-style" />

  <div id="divToCopy" style="display: none" contenteditable="true"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

而不是display:none;使用visibility:hidden这可能适合您。

Answer 2

不要使用：

display: none;
visibility: hidden;

使用：

width: 1px;
height: 1px;
overflow: hidden;

Answer 3

我们可以使用position:absolute;和left: -99999px将其移出屏幕，而不是使用CSS隐藏元素。

＆＃13;

＆＃13;

var Clipboard = function () {
		
			var clipboard = {};
			
			clipboard.cssStyle = "";
			clipboard.cssClass = "";
			clipboard.targetId = "";
			
			clipboard.highlight = function (targetId) {
				// backup the styling of the target div
				clipboard.cssStyle = $("#" + targetId).attr('style');
				clipboard.cssClass = $("#" + targetId).attr('class');
				
				// create a ranged selection
				window.getSelection().removeAllRanges();
				if (window.getSelection) {
					console.log("has selection");
					var node = document.getElementById("divToCopy");
					var range = document.createRange();
					console.log(range);
					range.selectNodeContents( node );
					window.getSelection().removeAllRanges();
					window.getSelection().addRange( range );
				}
				
				// highlight
				$("#" + targetId).css("background-color", "yellow");
			};
			
			clipboard.copyWithStyle = function (targetId) {
				var toCopy = $('#' + targetId).html();
				$('#divToCopy').html(toCopy);
				
				clipboard.targetId = targetId;
				clipboard.highlight(targetId);
			};
			
			clipboard.copyNoStyle = function (targetId) {
				var toCopy = $('#' + targetId).html();
				$('#divToCopy').html(toCopy);
				
				$('#divToCopy *').removeAttr('style');
				$('#divToCopy *').removeAttr('class');
				
				clipboard.targetId = targetId;
				clipboard.highlight(targetId);
			};
			
			$("#divToCopy").bind('copy', function() {
				$("#" + clipboard.targetId).attr('style', clipboard.cssStyle);
				$("#" + clipboard.targetId).attr('class', clipboard.cssClass);
			});
			
			return clipboard;
		};
		
		$(document).ready(function(){
			var c = Clipboard();
			$("#copy-with-style").click(function(event){
				c.copyWithStyle("content");
			});
			
			$("#copy-no-style").click(function(event){
				c.copyNoStyle("content");
			});
		});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="my-body" align="center">
		<br/>
		<div id="content" style="text-align:left; margin:0 auto; border: 1px solid black; width: 300px; padding: 5px;">
			<div style="color:red">RED by Taylor Swift</div>
			<ul>
				<li>One</li>
				<li style="font-weight:bold;">Two</li>
				<li>3</li>
				<li>Four</li>
				<li>~!@#$%^&*()______+{}[]:";'<>?,./"</li>
			</ul>
			<table style="border:1px solid green;">
				<tr>
					<td colspan=2>Merged</td>
					<td style="color:blue;">Blue</td>
				</tr>
				<tr>
					<td>Red</td>
					<td>Green</td>
					<td>Violet</td>
				</tr>
			</table>
		</div>
		<br/>
		<input type="button" value="Copy With Style" id="copy-with-style"/>
		<input type="button" value="Copy Without Style" id="copy-no-style"/>
		
		<div id="divToCopy" style="position:absolute; left: -99999px" contenteditable="true"></div>
	</div>

＆＃13;

＆＃13;

＆＃13;