JSFiddle - React, Tailwind, and code Playground

by Amin Kodaganur

HTML

<textarea id="output"></textarea>
<button id="paste">Paste</button>

JavaScript

const queryOpts = { name: 'clipboard-read', allowWithoutGesture: false };
const permissionStatus = await navigator.permissions.query(queryOpts);
const target = document.querySelector('#output');

target.addEventListener('paste', (event) => {
    let paste = (event.clipboardData || window.clipboardData).getData('text');
    paste = paste.toUpperCase();
 
    const selection = window.getSelection();
    if (!selection.rangeCount) return false;
    selection.deleteFromDocument();
    selection.getRangeAt(0).insertNode(document.createTextNode(paste));

    event.preventDefault();
});

const btn = document.querySelector('#paste');
btn.addEventListener('click', (event) => { 
	navigator.clipboard.readText().then(text => {
    console.log('Pasted content: ', text);
  })
  .catch(err => {
    console.error('Failed to read clipboard contents: ', err);
  });
  //target.dispatchEvent(new Event('paste'));
});