How to use JavaScript to complete the copy function?-CodePudding

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:;"   onclick="copyJoblink('https://chickpt.com.tw/dl?tp=4&um=1&ti={{$formatted_job['id']}}&e=share_job')">copy</a>

CodePudding user response：

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"   onclick="clipboardCopy(event)">copy</a>

CodePudding user response：

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

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

CodePudding user response：

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

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