JSFiddle - React, Tailwind, and code Playground

by martinschneider23

HTML

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

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

JavaScript

function eventHandler(value) {
  writeTextToClipboard(value);
}

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);
  }
}