JSFiddle - React, Tailwind, and code Playground

by mamounothman

HTML

<div> this is parent element!!1 <span> text to copy1 </span> </div>
<div> this is parent element!!2 <span> text to copy2 </span> </div>
<div> this is parent element!!3 <span> text to copy3 </span> </div>

JavaScript

function cpyText(text) {
  let data = new ClipboardItem({ "text/plain": text });
  navigator.clipboard.write(data).then(function() {
    console.log('Copied to clipboard!!!');
  }, function() {
    /* handle error here! */
  });
}


const mySpan = document.querySelectorAll('span');

mySpan.forEach(element => {
    var parSpan = element.parentElement;
    parSpan.addEventListener('click', () => {
    
    
    
        navigator.permissions.query({
          name: 'clipboard-read'
        }).then(permissionStatus => {
          // Will be 'granted', 'denied' or 'prompt':
          console.log(permissionStatus.state);

          // Listen for changes to the permission state
          permissionStatus.onchange = () => {
            console.log(permissionStatus.state);
     
            
            //cpyText(element.textContent.trim());
            //console.log('text copied!!');
          };
        });
    });
});