Copy values from html <select multiple> to clipboard

Question

I have this select element

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

A user is complaining because they cannot copy values to their clipboard. Is there any way to make it so users can copy? I created this JSfiddle however it is not a good solution in my opinion.

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

Answer 1

I think it cannot be done with a button (like in your example). However it is somewhat possible by doing something like described below.

First we need a textfield, which value is editable and can be selected (this will work as our "clipboard"). A second thing we need is a way to detect if user presses CTRL (for CTRL+C). So the basic idea is to copy selected values to our textfield and when the user presses CTRL we select the contents of our textfield. Then by pressing C the user is performing a copy command on our textfield instead of the select-element.

Here's a basic implementation (check the jsfiddle below). You can fine tune it to match your needs :)

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(); } }

Might want to add CSS to hide the clipboard field #clipboard {width: 1px;height: 1px;padding:0;position:absolute;left:-9999px;}

http://jsfiddle.net/LubZt/

UPDATE: http://jsfiddle.net/Kcv6j/ this version works better when holding CTRL to select multiple items.