我认为这不能用按钮来完成(就像你的例子一样)。然而,通过执行如下所述的操作,这在某种程度上是可能的。
首先,我们需要一个文本字段,其值是可编辑的并且可以选择(这将用作我们的“剪贴板”)。我们需要的第二件事是检测用户是否按下 CTRL(对于 CTRL+C)的方法。因此,基本思想是将选定的值复制到文本字段,当用户按下 CTRL 时,我们选择文本字段的内容。然后,通过按 C,用户将在我们的文本字段而不是选择元素上执行复制命令。
这是一个基本的实现(检查下面的 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/LubZt/
UPDATE:
http://jsfiddle.net/Kcv6j/ http://jsfiddle.net/Kcv6j/当按住 CTRL 键选择多个项目时,此版本效果更好。