CODEWITHSUNDEEP
javascripthtml
jhabar singh Bhati
jhabar singh Bhati

Reputation: 109

document.execCommand('copy') Command not working in Chrome

HTML

<input type="text" id="clipboard">
<button class="share-button">share</button>

JS

  text = 'text to be copied';

  document.querySelector('.share-button').addEventListener('click', () => {
      var element = document.querySelector('#clipboard');
      element.setAttribute("value", text);
      console.log(element.value);
      element.select();
      document.execCommand('copy');

  });

CSS

#clipboard {
  position: absolute;
  visibility: hidden;
}

I am trying to copy text to the clipboard but I don't understand what wrong with my code. I copied the code from MDN documentation.

When I doing these things it is not working

#clipboard {
  position: absolute;
}

// or

#clipboard {
  visibility: hidden
}

// or

#clipboard {
  display: none
}

Upvotes: 0

Views: 349

Answers (1)

Weilory
Weilory

Reputation: 3111

const share_btn = document.querySelector('.share-button');

function copy_to_clipboard(stritem){
    const el = document.createElement('textarea');
    el.value = stritem;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
    window.alert('Successfully copied to your clipboard!'); 
}

text = 'text to be copied';
share_btn.addEventListener('click', ()=>{copy_to_clipboard(text);});
<button class="share-button">share</button>

Upvotes: 1

Related Questions