javascript - 将随机生成的密钥复制到剪贴板

Question

我有一个网站，当客户购买它们时，它会生成从https://www.sendowl.com分发的随机代码，然后在感谢页面上提供这些代码。我的问题是我想要一个复制所有代码并添加换行符的按钮。到目前为止，我得到了一次复制一个代码的东西，但我无法弄清楚这个

这是我正在使用的脚本。

<script>
function myFunction(val, event) {
  var inp = document.createElement('input');
  document.body.appendChild(inp)
  inp.value = val;
  inp.select();
  document.execCommand('copy', false);
  inp.remove();
  alert("Copied the text: " + copyText.value);
}
</script>

这里是复制代码的按钮。{% for license in order.licenses %}{{ license.key }}{% endfor %}是必需的，因为它是生成代码的原因。

<button type="button" onclick="myFunction('{% for license in order.licenses %}{{ license.key }}{% endfor %}')"class="btn btn-primary">Copy All Codes</button>

在这方面，我是一个主要的菜鸟，所以任何帮助都将不胜感激。

代码复制如下：

我希望他们像这样复制：

这是购买后如何在页面上分发代码的屏幕截图， 感谢页面

以下是完整的感谢页面或收据

<p>Hi{% if order.receiver_name %} {{ order.receiver_first_name }}{% endif %},</p>

<p><br />Thanks for ordering from us. This email confirms your order of the following items:<br />{% for cart_item in order.cart.cart_items %}{{ cart_item.product.name }} x {{ cart_item.quantity }}<br />{% endfor %}</p>

<p>Your Order ID is {{ order.id }}{% if order.settled_gross %} and your payment has now cleared. A receipt has been emailed to you separately.{% endif %}</p>
<br>
<br>




{% assign product_types = order.cart.cart_items | map: 'product' | map: 'member_types' | flatten %}{% if product_types contains 'tangible' %}You have ordered tangible goods. These will be posted shortly and you will be notified once they have been dispatched.{% endif %}

{% if product_types contains 'digital' or product_types contains 'software' or product_types contains 'redirect' %}
{% if product_types contains 'software' %}


<button type="button" onclick="myFunction('{% for license in order.licenses %}{{ license.key }}{% endfor %}')"class="btn btn-primary">Copy All Codes</button>


<br>
<br>
<table border="1">

  <tr><th> Name </th> <th> Code </th> <th> QR Code </th> <th> Copy </th>

<tr>{% for license in order.licenses %} <td>{{ license.product.name }}:</td>

<td>{{ license.key }}</td>  <td> <img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl={{ license.key }} " /path/to/image.jpg /> </td> <td><button type="button" onclick="myFunction('{{ license.key }}')"class="btn btn-primary">Copy Code</button> </td> </tr>

{% endfor %}{% endif %}{% endif %}
</table>


{% if product_types contains 'service' %} You have ordered service goods. The merchant will be in contact to arrange the carrying out of these services.{% endif %}
<p>&nbsp;</p>
<p>Thanks,</p>
<p>&nbsp;</p>
<p>Liquid Realms</p>

<script>
function myFunction(val, event) {
  var inp = document.createElement('input');
  document.body.appendChild(inp)
  inp.value = val;
  inp.select();
  document.execCommand('copy', false);
  inp.remove();
  alert("Copied the text: " + copyText.value);
}
</script>

Answer 1

/n我注意到在创建输入类型的元素时不能使用，因此在创建函数时使用 textarea 来复制所有代码，如下例所示：

我最终创建了一个名为的函数copyAll，它将遍历表格的第二列（代码所在的位置）并复制它们，然后将创建一个 textarea 元素，它将接收所有带有换行符的代码，然后我们可以复制它

<p>Hi{% if order.receiver_name %} {{ order.receiver_first_name }}{% endif %},</p>

<p><br />Thanks for ordering from us. This email confirms your order of the following items:<br />{% for cart_item in order.cart.cart_items %}{{ cart_item.product.name }} x {{ cart_item.quantity }}<br />{% endfor %}</p>

<p>Your Order ID is {{ order.id }}{% if order.settled_gross %} and your payment has now cleared. A receipt has been emailed to you separately.{% endif %}</p>
<br>
<br>




{% assign product_types = order.cart.cart_items | map: 'product' | map: 'member_types' | flatten %}{% if product_types contains 'tangible' %}You have ordered tangible goods. These will be posted shortly and you will be notified once they have been dispatched.{% endif %}

{% if product_types contains 'digital' or product_types contains 'software' or product_types contains 'redirect' %}
{% if product_types contains 'software' %}


<button type="button" onclick="copyAll()"class="btn btn-primary">Copy All Codes</button>


<br>
<br>
<table border="1">

  <tr><th> Name </th> <th> Code </th> <th> QR Code </th> <th> Copy </th>

<tr>{% for license in order.licenses %} <td>{{ license.product.name }}:</td>

<td>FIRST CODE</td>  <td> <img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl={{ license.key }} " /path/to/image.jpg /> </td> <td><button type="button" onclick="myFunction('{{ license.key }}')"class="btn btn-primary">Copy Code</button> </td> </tr>
<tr>{% for license in order.licenses %} <td>{{ license.product.name }}:</td>

<td>SECOND CODE</td>  <td> <img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl={{ license.key }} " /path/to/image.jpg /> </td> <td><button type="button" onclick="myFunction('{{ license.key }}')"class="btn btn-primary">Copy Code</button> </td> </tr>

{% endfor %}{% endif %}{% endif %}
</table>


{% if product_types contains 'service' %} You have ordered service goods. The merchant will be in contact to arrange the carrying out of these services.{% endif %}
<p>&nbsp;</p>
<p>Thanks,</p>
<p>&nbsp;</p>
<p>Liquid Realms</p>

<script>
function myFunction(val, event) {
  var inp = document.createElement('input');
  document.body.appendChild(inp)
  inp.value = val;
  inp.select();
  document.execCommand('copy', false);
  inp.remove();
  alert("Copied the text: " + copyText.value);
}

function copyAll() {
  let trs = document.querySelectorAll('tr')
  let inp = document.createElement('textarea')
  let codes = ''
  trs.forEach((tr, index) => index > 0 && (codes += tr.querySelectorAll('td')[1].innerText + "\n"))
  document.body.appendChild(inp)
  inp.value = codes
  inp.select()
  document.execCommand('copy', false)
  inp.remove()
  alert('Copied \n' + codes)
  
}

</script>