Javascript Copy To Clipboard on safari?

Asked
Active3 hr before
Viewed126 times

7 Answers

clipboardjavascript
90%

document.execCommand("copy") works without any issue now in Safari.,If you have a specific use case of copy command not working only in safari, one of the things that you may want to check is if your copy command is being run inside an API callback or in some other similar asynchronous fashion. Also, copying in Safari will only work if it is coming from DOM event (console testing won't work).,For me, my text to be copied was coming from async call's response. I had to move API call outside of onClick to prefetch the text and then, only do the copying of that text when copy button is clicked. Worked!,I am using document.execCommand("copy") command for copy.

It works on Safari (tested on iPhone 7 and iPad) and on other browsers.

window.Clipboard = (function(window, document, navigator) {
   var textArea,
      copy;

   function isOS() {
      return navigator.userAgent.match(/ipad|iphone/i);
   }

   function createTextArea(text) {
      textArea = document.createElement('textArea');
      textArea.value = text;
      document.body.appendChild(textArea);
   }

   function selectText() {
      var range,
         selection;

      if (isOS()) {
         range = document.createRange();
         range.selectNodeContents(textArea);
         selection = window.getSelection();
         selection.removeAllRanges();
         selection.addRange(range);
         textArea.setSelectionRange(0, 999999);
      } else {
         textArea.select();
      }
   }

   function copyToClipboard() {
      document.execCommand('copy');
      document.body.removeChild(textArea);
   }

   copy = function(text) {
      createTextArea(text);
      selectText();
      copyToClipboard();
   };

   return {
      copy: copy
   };
})(window, document, navigator);

// How to use
Clipboard.copy('text to be copied');
load more v
88%

It may be duplicate question but i didnt find the solution for this.,I am trying to copy text on button click. Its working on chrome, mozilla(working on on windows and mac but not on linux). And its not working on safari.,Because the first answer doesn't work for me on iPhone 10 Safari I have tried to find an other solution and I found one described here,According to CanIUse, Safari on iOS doesn't support document.execCommand('copy'), probably because of security reasons.

It works on Safari (tested on iPhone 7 and iPad) and on other browsers.

window.Clipboard = (function(window, document, navigator) {
   var textArea,
      copy;

   function isOS() {
      return navigator.userAgent.match(/ipad|iphone/i);
   }

   function createTextArea(text) {
      textArea = document.createElement('textArea');
      textArea.value = text;
      document.body.appendChild(textArea);
   }

   function selectText() {
      var range,
         selection;

      if (isOS()) {
         range = document.createRange();
         range.selectNodeContents(textArea);
         selection = window.getSelection();
         selection.removeAllRanges();
         selection.addRange(range);
         textArea.setSelectionRange(0, 999999);
      } else {
         textArea.select();
      }
   }

   function copyToClipboard() {
      document.execCommand('copy');
      document.body.removeChild(textArea);
   }

   copy = function(text) {
      createTextArea(text);
      selectText();
      copyToClipboard();
   };

   return {
      copy: copy
   };
})(window, document, navigator);

// How to use
Clipboard.copy('text to be copied');
load more v
72%

Clipboard.copy('text to copy');,https://stackoverflow.com/questions/34045777/copy-to-clipboard-using-javascript-in-ios,Looks like it's not working on safari 13...,@torben3d using this page is scrolled at the top :)

hey, I used the hacky way of positioning the element out of page flow.

position: absolute;
top: -9999 px
load more v
65%

onClick = {
   () => {
      navigator.clipboard.writeText(this.state.textToCopy)
   }
}
load more v
75%

document.execCommand("copy"),document.execCommand("cut"),document.execCommand("paste"),The Clipboard API provides asynchronous access to read and write the clipboard contents directly. For example, to read text from the clipboard:

navigator.clipboard.readText().then(text => outputElem.innerText = text);
load more v
40%

Security and permissions,You can play with the Async Clipboard API in the demos below or directly on Glitch.,The Async Clipboard API is limited to handling text and images. Chrome 84 introduces an experimental feature that allows the clipboard to handle any arbitrary data type.,The Asynchronous Clipboard API was implemented by Darwin Huang and Gary Kačmarčík. Darwin also provided the demo. Thanks to Kyarik and again Gary Kačmarčík for reviewing parts of this article.

async function copyPageUrl() {
   try {
      await navigator.clipboard.writeText(location.href);
      console.log('Page URL copied to clipboard');
   } catch (err) {
      console.error('Failed to copy: ', err);
   }
}
load more v
22%

support is patchy, especially on older versions of Safari on macOS and iOS,Accessing the OS clipboard using browser JavaScript has been possible for several years using document.execCommand(). ,Accessing the clipboard programmatically raises several security concerns:,clipboard access is synchronous, which has performance and security implications

To avoid potential issues, the Clipboard API can only be used on pages served over HTTPS (localhost is also permitted). When running in an iframe, the parent page must also grant clipboard-read and/or clipboard-write permissions:

<iframe src="childpage.html" allow="clipboard-read; clipboard-write"></iframe>
load more v

Other "clipboard-javascript" queries related to "Javascript Copy To Clipboard on safari?"