您可以在div的内容上使用document.execCommand（'copy'）吗？

Question

If I copy an html table manually, I can paste it into a Google Doc with the formatting preserved (it looks like a table).

How can I copy the contents programmatically, with a button, and paste as an html table? Something like the following...

evar copydeck = $("<div>").html(htmlToInsert);
$('body').append(copydeck);
copydeck.select();
document.execCommand('copy');
copydeck.remove();

The above code does not work...but this does:

copydeck = $("<textarea>").val(this.list.join("\r\n"));
$('body').append(copydeck);
copydeck.select();
document.execCommand('copy');
copydeck.remove();

I guess it is because the element must be selectable - like an input or htmlarea field. But they can't hold html (or it is just plain text, not html).

Any way to copy and paste HTML?

Answer 1

Yes!

  function copy() { var target = document.getElementById('my-div'); var range, select; if (document.createRange) { range = document.createRange(); range.selectNode(target) select = window.getSelection(); select.removeAllRanges(); select.addRange(range); document.execCommand('copy'); select.removeAllRanges(); } else { range = document.body.createTextRange(); range.moveToElementText(target); range.select(); document.execCommand('copy'); } } 

  <div id="my-div" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;"> Hello stackoverflow!)) </div> <div> <input onclick="copy()" type="button" value="Copy"> </div>