JSFiddle - React, Tailwind, and code Playground

by evanstade

HTML

<div>
<ol>
<li>clear clipboard permission before starting (page setting icon at left of location bar)</li>
<li>place some text content on your clipboard (i.e. copy some text)</li>
<li>press "Click me to paste!" button. <b>Expectation</b>: clipboard permission popup appears </li>
<li>block permission request. <b>Expectation</b>: page text reflects failure to paste</li>
<li>place focus in <pre style="display:inline-block">&lt;input&gt;</pre></li>
<li>press paste shortcut (Ctrl+v or Cmd+v). <b>Expectation</b>: page text reflects successful paste </li>
<li>repeat step 3</li>
</ol>

</div>
<input id="textbox" type="text"/>
<div id="noninput"></div>
<button id="pastebutton">Click me to paste!</button>

JavaScript

let dopaste = () => {
  navigator.clipboard.readText()
    .then((data) => {
      document.querySelector('#noninput').textContent = "Successful read from clipboard: " + data;
    })
    .catch((error) => {
      document.querySelector('#noninput').textContent = "Failed to read from clipboard: " + error.message;
    });  
}

document.querySelector('#pastebutton').onclick = dopaste;

const textbox = document.querySelector('#textbox');
document.querySelector('#textbox').addEventListener('paste', (evt) => {
  evt.preventDefault();
  dopaste();
});