Paste functionality of clipboardData API in javascript getting error Uncaught TypeError: Cannot read properties of undefined (reading 'getData')

Question

Html button code as follows i tried simple onclick function on button and also event on second button

<button onclick="myFunction()">Click me</button>
<button id="button">Paste</button>

Javacript code as follows

function myFunction() {

      var clipboarddata =  window.event.clipboardData.getData('text');    
      console.log("paste value" + clipboarddata);
}

var button = document.getElementById("button");
button.addEventListener("click", function(event){
   alert(event.target);
   event.preventDefault();
   var clipboarddata =  window.event.clipboardData.getData('text');    
   console.log("paste value" + clipboarddata);
});

both the ways i am getting same error

Answer 1

You can use navigator.clipboard.readText instead.

<button id="button">Paste</button>
<script>
document.querySelector('#button').addEventListener('click', e => {
  navigator.clipboard.readText().then(text => console.log("paste value:", text));
});
</script>