当点击按钮时，如何将自定义文本复制到剪贴板中？

Question

我有一个输入，并想使有一个复制链接旁边它的标签。

当我单击“复制”时，我不仅想复制输入值，而且还想预置更多文本。

http://www.test.com？code=+输入值

我该怎么做？

//copy text 
function getLink(id) {
    var copyText = document.getElementById(id);
    copyText.select();
    copyText.setSelectionRange(0, 99999); /* For mobile devices */
    document.execCommand("copy");
    alert("Copied the text: " + copyText.value);
}

使用上面的代码，只复制值。

Answer 1

您可以编辑当前输入元素中的值，然后在复制编辑后的值后将其还原为原始值。类似这样的事情：

null

function getLink(e) {
  const copyPad = e.target.previousElementSibling,
    storedValue = copyPad.value,
    copyValue = 'http://www.test.com?code=' + storedValue;
  copyPad.value = copyValue;
  copyPad.select();
  copyPad.setSelectionRange(0, 99999); /* For mobile devices */
  document.execCommand("copy");
  console.log("Copied the text: " + copyPad.value);
  copyPad.value = storedValue;
}

const but = document.querySelector('#copyLink');
but.addEventListener('click', getLink);

<input><button id="copyLink">Copy</button>
<input> Paste here to check