从HTML <select multiple>中复制值到剪贴板

Question

我有一个选择元素

<select multiple="multiple" size="10" id="selection">  
    <option value="test1">Test1</option> 
    <option value="test2">Test2</option>
</select>

一位用户抱怨无法将值复制到剪贴板。有没有办法让用户可以复制？我创建了这个JSfiddle，但在我看来这不是一个好的解决方案。

http://jsfiddle.net/22gy9/4/

- Aaron

---

我认为仅凭JavaScript是无法完成这个任务的，通常我们看到的是使用Flash对象来完成工作的插件，更多信息请参见此处：https://github.com/blog/1365-a-more-transparent-clipboard-button - G.Mendes

用户抱怨，不代表你必须迎合他们的每个愿望。 - j08691

重要的不是为什么，而是如何做到。停止批评。 - morkro

顺便说一句，厉害的人们使用FireBug从不可选择的HTML元素中提取值 :P - Scherbius.com

您可以查看以下博客，它将帮助您将内容保存到剪贴板：http://www.deluxeblogtips.com/2010/06/javascript-copy-to-clipboard.html。对于IE浏览器，请使用clipboardData.setData('text', s)方法来保存内容。对于其他浏览器，请使用基于Flash的解决方案。 - Rumen Jekov

Answer 1

我认为无法通过按钮（如您的示例）完成。但是，可以通过以下方式实现某种程度的可能性。

首先，我们需要一个可编辑且可选择值的文本字段（这将作为我们的“剪贴板”）。第二件事是要检测用户是否按下CTRL键（用于CTRL + C）。因此，基本思想是将所选值复制到我们的文本字段中，当用户按下CTRL时，我们选择我们的文本字段的内容。然后，通过按C键，用户执行了对我们的文本字段而不是select元素的复制命令。

这是一个基本实现（请查看下面的jsfiddle）。您可以微调它以满足您的需求 :)

HTML Test1 Test2 JavaScript

function changeClipboardValue(selectBox) { var clipboard = document.getElementById("clipboard"); var text = ""; for (i = 0; i < selectBox.length; i++) { if(selectBox.options[i].selected) text += selectBox.options[i].value + ","; } clipboard.value = text; }

function keydown(e) { if(e.keyCode === 17) { var clipboard = document.getElementById("clipboard"); clipboard.select(); } }

function keyup(e) { if(e.keyCode === 17) { var selectBox = document.getElementById("selection"); selectBox.focus(); } }

可能需要添加CSS来隐藏剪贴板字段 #clipboard {width: 1px;height: 1px;padding:0;position:absolute;left:-9999px;}

http://jsfiddle.net/LubZt/

更新： http://jsfiddle.net/Kcv6j/ 当按住CTRL键选择多个项目时，此版本效果更好。

- niklas-e

---

这是一个不错的技巧，但如果用户选择多个项目（按住ctrl键），然后按c键，它将无法工作。用户必须释放ctrl键，然后再次按下才能复制。除此之外，这是一个很好的想法。 - Aaron

嗯，按住Ctrl键选择多个选项对我来说是有效的。你用的是什么浏览器，Aaron？ - niklas-e

我成功地复现了你所描述的问题... 可以用类似这样的东西来修复 http://jsfiddle.net/Kcv6j/ - niklas-e