CODEWITHSUNDEEP
javascriptdominternet-explorer-11
Cloudfoot
Cloudfoot

Reputation: 1

Javascript code for "Copy to Clipboard" won't work in Internet Explorer 11

I have a piece of Javascript code that currently makes a call to a specific webpage, returns the data, then copies it to the clipboard. It's working in Chrome, Safari, and Firefox, but for some reason the copy functionality won't work in IE 11.

The response body is being returned with the correct data, but I can't seem to get that data to the clipboard. The code needs to be pure Javascript, as it's being utilized through a developer portal with some limitations/restrictions. In essence, I want to avoid importing jQuery libraries/using jQuery.

function httpGet(theUrl)
{
   if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp=new XMLHttpRequest();
   }
   else
   {// code for IE6, IE5
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange=function()
   {
       if (xmlhttp.readyState==4 && xmlhttp.status==200)
       {
           function listener(e) {
             e.clipboardData.setData("text/html", xmlhttp.responseText);
             e.clipboardData.setData("text/plain", xmlhttp.responseText);
             e.preventDefault();
           }
           document.addEventListener("copy", listener);
           document.execCommand("copy");
           document.removeEventListener("copy", listener);

           return xmlhttp.responseText;
       }
   }
   xmlhttp.open("GET", theUrl, false );
   xmlhttp.send();
}

The function is being called in an "onclick" HTML event, which is firing normally from what I understand (considering the call to "theUrl" page is being made and returning data). Any input on why the clipboard isn't getting the data would be GREATLY appreciated. Thanks!

Upvotes: 0

Views: 3724

Answers (2)

Zhi Lv
Zhi Lv

Reputation: 21383

In the IE browser, you could use the following code:

<script>
    function Copy() {
        if (window.clipboardData) {
            window.clipboardData.clearData();
            window.clipboardData.setData("Text", document.getElementById('txtacpy').value);
        }
        else {
            alert("not support window.cliboardData")
        }
    }
    function paste() {
        if (window.clipboardData) {
            document.getElementById('txtapaste').value = window.clipboardData.getData("Text");
        }
    }
</script>
<input type="button" id="btncopy" value="Copy" onclick="Copy()" />
<br />
<input type="text" name="txtacpy" id="txtacpy" />
<br />
<input type="button" id="btncopy" value="Paste" onclick="paste();" />
<br />
<input type="text" name="txtapaste" id="txtapaste" />

the result like this.

Note:The above code only works well in IE browser, so, you might need to check whether the browser is IE browser first, please check this thread and this thread.

Upvotes: 1

Rafael Rocha
Rafael Rocha

Reputation: 518

If it wasn't IE11 you could use ClipboardAPI, so then I would just use:

function copy() {
  const copyText = document.querySelector("#input");
  copyText.select();
  document.execCommand("copy");
}

document.querySelector("#copy").addEventListener("click", copy);

Hope it helps!

Upvotes: 0

Related Questions