Sample HTML with JavaScript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:msa="http://www.publictalksoftware.co.uk/msa">
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<style type="text/css">
* {
font-family: 'PT Sans';
font-size: 14pt;
}
</style><script type="text/javascript">
function clearSelection() {
if (document.getSelection) { // for all new browsers (IE9+, Chrome, Firefox)
document.getSelection().removeAllRanges();
document.getSelection().addRange(document.createRange());
console.log("document.getSelection");
} else if (window.getSelection) { // equals with the document.getSelection (MSDN info)
if (window.getSelection().removeAllRanges) { // for all new browsers (IE9+, Chrome, Firefox)
window.getSelection().removeAllRanges();
window.getSelection().addRange(document.createRange());
console.log("window.getSelection.removeAllRanges");
} else if (window.getSelection().empty) { // Chrome supports this as well
window.getSelection().empty();
console.log("window.getSelection.empty");
}
} else if (document.selection) { // IE8-
document.selection.empty();
console.log("document.selection.empty");
}
}
function CopyToClipboard(containerid) {
clearSelection();
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select().createTextRange();
document.execCommand("copy");
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
document.execCommand("copy");
alert("Copied to Clipboard")
}
}
</script></head>
<body>
<div id="speaker-emailID0EPFAC">
<p>Dear ABC</p>
<p>I hope you are well. We are looking forward to your public talk on Mar 12 at 1pm.</p>
<p>Talk #0 How Can You Find Real Joy?</p>
<ul>
<li>What is your chosen song number?</li>
<li>Do you have any media? Please send to me with instructions.</li>
<li>Can you close in prayer?</li>
<li>Can we organize some refreshments with a family for you?</li>
</ul>
<p>I look forward to your responses as soon as you are able so that I can prepare the worksheet for the brothers at the hall.</p>
</div><button class="copy-button" id="buttonID0EPFAC" onclick="CopyToClipboard('speaker-emailID0EPFAC')">Copy to Clipboard</button><div id="speaker-emailID0EYCAE">
<p>Dear DEF</p>
<p>I hope you are well. We are looking forward to your public talk on Mar 19 at 1pm.</p>
<p>Talk #185 Does The Truth Affect Your Life?</p>
<ul>
<li>What is your chosen song number?</li>
<li>Do you have any media? Please send to me with instructions.</li>
<li>Can you close in prayer?</li>
<li>Can we organize some refreshments with a family for you?</li>
</ul>
<p>I look forward to your responses as soon as you are able so that I can prepare the worksheet for the brothers at the hall.</p>
</div><button class="copy-button" id="buttonID0EYCAE" onclick="CopyToClipboard('speaker-emailID0EYCAE')">Copy to Clipboard</button></body>
</html>
This does not work with Edge. It does not select the text for the stated element. It does show the popup saying it was copied to the clipboard though. It is the other JavaScript logic. It works ok with IE mode.
Based on the answer provided in the comments, I have changed the second function:
function CopyToClipboard(containerid) {
if (document.selection) { //IE
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select();
console.log("document.body.createTextRange");
} else if (window.getSelection) { //others
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
console.log("document.body.createRange");
}
document.execCommand("copy");
alert("Copied to Clipboard")
}
This correctly selects the text and actually copies to teh clipboard, on both Edge, Chrome and Firefox. I am not sure on how to upgrade clearSelection().
