JSFiddle - React, Tailwind, and code Playground

by martinschneider23

HTML

<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>

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})
    navigator.clipboard.write([cbi])
      .then(function () { console.log('copied'); })
      .catch(function (error) { console.log(error); });
  }
  // Firefox
  else {
    navigator.clipboard.writeText(value);
  }
}