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

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 并在将值复制到剪贴板后将其删除。

基本上你需要两个函数来复制到剪贴板。即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>