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，用户在我们的文本字段而不是select元素上执行复制命令。

这是一个基本实现（请查看下面的jsfiddle）。您可以根据自己的需要对其进行微调：）

HTML

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

将值从html <select multiple =“”>复制到剪贴板</select>

1 个答案: