How to use JavaScript to complete the copy function?

Question

I am new to the program! I want to implement a function, click the button to copy the URL in the onclick to the clipboard for the user to paste it elsewhere, but I don't know how to implement this requirement, I really need everyone's help ,thank you all.

  function copyJoblink(joblink){
        let joblink = "https://chickpt.com.tw/dl?tp=4&um=1&ti={{$formatted_job['id']}}&e=share_job"
        window.getSelection().selectAllChildren(joblink);
        document.execCommand('copy')
    }

a{
  display: block;
  width: 60px;
  height: 60px;
  background-color: #ccc;
  line-height: 60px;
  text-align:center;
}

copy

user_401278 · Answer

With preventDefault(), you can use the href of your link because default action should not be taken as it normally would be.

Then you will need to use clipboard API and clipboard.writeText() to make it work.

function clipboardCopy(event) {
    event.preventDefault();
    navigator.clipboard.writeText(event.target.getAttribute('href')).then(() => {
      console.log('clipboard saved url :' + event.target.getAttribute('href'));
    }, () => {
      console.log('clipboard saved url : failed...');
    });
}

a{
  display: block;
  width: 60px;
  height: 60px;
  background-color: #ccc;
  line-height: 60px;
  text-align:center;
}

copy

user_17922996 · Answer

function copyJoblink(jobLink) {
    navigator.clipboard.writeText(jobLink);

  /* Alert the copied text */
  alert("Copied the text: " + jobLink);
}

a{
  display: block;
  width: 60px;
  height: 60px;
  background-color: #ccc;
  line-height: 60px;
  text-align:center;
}

copy

user_12571947 · Answer

You can do it Like below Tested on Chrome and Microsoft Edge and it is working fine:

function copyJoblink(joblink) {                
  const input = document.createElement('input');
  input.value = joblink;
  document.body.appendChild(input);
  input.focus();
  input.select();
  document.execCommand("copy");
  
  document.body.removeChild(input);

  alert('Link Copied: ' + joblink);
}

a {
  display: block;
  width: 60px;
  height: 60px;
  background-color: #ccc;
  line-height: 60px;
  text-align:center;
}

copy

How to use JavaScript to complete the copy function?

3 Answers