title: How to copy to clipboard in safari using jquery/javascript?
body: <p>I looked into a bunch of answers and articles which show how to copy text on button click via jquery but none of them worked for me. I am appending a value through ajax into the DOM and i would like that to be copied on click of a button.</p>
  
  <p>All of these solutions work on chrome and they work in safari (version: 13.0.5) if jsfiddle/codepen is used but they dont work in safari when used via a separate html and js file, in my case anyway.</p>
  
  <p>First i tried to make an invisible input with position: absolute and left: -99999 and selected the text in it using jquery and used execCommand("copy");. This did not work.
  I also tried the answers mentioned here: <a href="https://stackoverflow.com/questions/40147676/javascript-copy-to-clipboard-on-safari">Javascript Copy To Clipboard on safari?</a></p>
  
  <p>I also tried the two functions mentioned below to no luck. In addition to these functions i also tried every javascript plugin i could find and those did not work either.</p>
  
  <p>function 1:</p>
  
  <pre><code>function copy(value, showNotification, notificationText) {
    var $temp = $("&lt;input&gt;");
    $("body").append($temp);
    $temp.val(value).select();
    document.execCommand("copy");
    $temp.remove();
    $(".copyfrom").val(value)
    $(".copyfrom").select();
    document.execCommand("copy");
  
    //trigger animation---
    if (typeof showNotification === 'undefined') {
      showNotification = true;
    }
    if (typeof notificationText === 'undefined') {
      notificationText = "Copied to clipboard";
    }
  
    var notificationTag = $("div.copy-notification");
    if (showNotification &amp;&amp; notificationTag.length == 0) {
      notificationTag = $("&lt;div/&gt;", { "class": "copy-notification", text: notificationText });
      $("body").append(notificationTag);
  
      notificationTag.fadeIn("slow", function () {
        setTimeout(function () {
          notificationTag.fadeOut("slow", function () {
            notificationTag.remove();
          });
        }, 1000);
      });
    }
  }
  </code></pre>
  
  <p>function2:</p>
  
  <pre><code>function copyToClipboard(textToCopy) {
    var textArea;
  
    function isOS() {
      return navigator.userAgent.match(/ipad|iphone/i);
    }
  
    function createTextArea(text) {
      textArea = document.createElement('textArea');
      textArea.readOnly = true;
      textArea.contentEditable = true;
      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 copyTo() {
      document.execCommand('copy');
      document.body.removeChild(textArea);
    }
  
    createTextArea(textToCopy);
    selectText();
    copyTo();
  
    //trigger animation---
    if (typeof showNotification === 'undefined') {
      showNotification = true;
    }
    if (typeof notificationText === 'undefined') {
      notificationText = "Copied to clipboard";
    }
  
    var notificationTag = $("div.copy-notification");
    if (showNotification &amp;&amp; notificationTag.length == 0) {
      notificationTag = $("&lt;div/&gt;", { "class": "copy-notification", text: notificationText });
      $("body").append(notificationTag);
  
      notificationTag.fadeIn("slow", function () {
        setTimeout(function () {
          notificationTag.fadeOut("slow", function () {
            notificationTag.remove();
          });
        }, 1000);
      });
    }
  }
  </code></pre>
  
  <p>Here is my ajax and html:</p>
  
  <pre><code>$(".fa-link").on("click", function () {
    var mlink = $(".boxmlink").attr("href").trim()
    var fetchWallID = new XMLHttpRequest()
    fetchWallID.open("POST", db, true);
    fetchWallID.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    fetchWallID.onload = function () {
      if (this.status == 200) {
        var url = $(location).attr("href").split("?")
        var id = (this.responseText).trim()
        var windowurl = url[0].trim()
        var finalurl = (windowurl + '?wallid=' + id).trim().replace("#", '')
        //copy(finalurl, true)
        //copyToClipboard(finalurl)
      }
    }
    fetchWallID.send("mlinkID=" + mlink)
  })
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;a href="#" class="fa fa-link"&gt;&lt;/a&gt;
  </code></pre>