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;
}

<a href="javascript:;"  class="job_info_share_paperlink" onclick="copyJoblink('https://chickpt.com.tw/dl?tp=4&um=1&ti={{$formatted_job['id']}}&e=share_job')">copy</a>

Answer 1

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;
}

<a href="https://chickpt.com.tw/dl?tp=4&um=1&ti={{$formatted_job['id']}}&e=share_job"  class="job_info_share_paperlink" onclick="clipboardCopy(event)">copy</a>