将值从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/

Answer 1

我认为这不能用按钮来完成（就像你的例子一样）。然而，通过执行如下所述的操作，这在某种程度上是可能的。

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

这是一个基本的实现（检查下面的 jsfiddle）。您可以对其进行微调以满足您的需求:)

超文本标记语言

<select multiple="multiple" size="10" id="selection" onkeydown="keydown(event)" onchange="changeClipboardValue(this)" >
<option value="test1">Test1</option> <option value="test2">Test2</option> </select> <input type="text" id="clipboard" onkeyup="keyup(event)" />

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 键选择多个项目时，此版本效果更好。