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

【问题标题】：Copy to clipboard value of selected option复制到所选选项的剪贴板值
【发布时间】：2018-06-20 06:48:18
【问题描述】：

我想使用 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 插件，但它似乎不适用于选择列表。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您需要input 才能复制到剪贴板。我在更改事件上创建了一个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>

【讨论】：

【解决方案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>

【讨论】：

你能帮我解决这个问题吗？ stackoverflow.com/questions/53374846/…

【解决方案3】：

您可以使用document.execCommand('copy') 来执行此操作。

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

【讨论】：

【解决方案4】：

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

【讨论】：