JSFiddle - React, Tailwind, and code Playground

by martinschneider23

HTML

<p>
This is what I need, but it doesn't work on Safari
</p>
<select id="dropdown" onChange="writeTextToClipboard(this.value);"><option value="0" class="hidden" selected="true" disabled="true">Menu</option><option value="Text I want to copy">Copy to clipboard</option><option>Other option</option></select>

<p>
This one works on Safari
</p>
<button onClick="writeTextToClipboard('Text I want to copy #2');">Test with button</button>

JavaScript

async function writeTextToClipboard(value) {
  // Safari, Chrome
  if(typeof ClipboardItem && navigator.clipboard.write) {
    const type = 'text/plain'
    const blob = new Blob([value], {type})
    const cbi = new ClipboardItem({[type]: blob})
    await navigator.clipboard.write([cbi])
    console.log(`Copied: ${value}`)
  }
  // Firefox
  else {
    navigator.clipboard.writeText(value);
  }
}

// Alternative solution suggested in https://stackoverflow.com/questions/50941892/copy-to-clipboard-value-of-selected-option
// Also doesn't work on Safari
$("#dropdown").on("change", function(){
  var value= `<input value="${$(this).val()}" id="selVal" />`;
  $(value).insertAfter('#dropdown');
  $("#selVal").select();
  document.execCommand("Copy");
  $("body").find("#selVal").remove();
});