Question

我想使用jQuery或JavaScript将select列表中选定选项的值复制到剪贴板。

我的html：

<select id="choose-color">
    <option value="red">RED</option>
    <option value="green">GREEN</option>
    <option value="yellow">YELLOW</option>
    <option value="black">BLACK</option>
</select>

当用户选择任何选项时，该值应复制到剪贴板。我尝试使用clipboard.js插件，但它似乎不适用于选择列表。

Answer 1

您需要input才能复制到剪贴板。我已经在change事件上创建了一个input，并在将值复制到剪贴板后将其删除。

基本上，您需要两个功能才能复制到剪贴板。即select()和execCommand()。 select()方法用于选择文本字段的内容。并且execCommand()方法为可编辑部分的选定部分执行指定的命令。

这是一个可行的示例。

$('#choose-color').on('change', function(){
  var value= `<input value="${$(this).val()}" id="selVal" />`;
  $(value).insertAfter('#choose-color');
  $("#selVal").select();
  document.execCommand("Copy");
  $('body').find("#selVal").remove();
});

black

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="choose-color">
    <option value="red">RED</option>
    <option value="green">GREEN</option>
    <option value="yellow">YELLOW</option>
    <option value="black">BLACK</option>
</select>

Answer 2

您需要创建一个临时元素textarea来设置select的值，然后使用该元素复制该值。将其复制到剪贴板后，删除该textarea元素。

$('#choose-color').change(function(){
  var textarea = $('<textarea />');
  textarea.val($(this).val()).css({
    visibility: 'none'
  }).appendTo('body');
  textarea.focus().select();
   if (document.execCommand('copy')) {
      textarea.remove();
      return true;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="choose-color">
    <option value="red">RED</option>
    <option value="green">GREEN</option>
    <option value="yellow">YELLOW</option>
    <option value="black">BLACK</option>
</select>

Answer 3

使用this很好的答案中的copy()功能，您还可以轻松地将复制到剪贴板进行下拉，

document.getElementById('choose-color').onclick = function () {
    let text = this.value;
    var input = document.createElement('input');
    input.setAttribute('value', text);
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input)
    return result;
}

Answer 4

您可以使用document.execCommand('copy')来做到这一点。

https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f

复制到所选选项的剪贴板值

4 个答案: