Copy values from html to clipboard Asked Jul 18 '14 at 20:19 Active Oct 16 '15 at 11:32 Viewed 4,096 times 6 0 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/ javascript html edited Oct 16 '15 at 11:32 Raedwald 46,613 43 151 237 asked Jul 18 '14 at 20:19 Aaron 1,361 1 13 30 What you can do is to replace the `` with an `` list with JavaScript. Keep the `` in the DOM and replace it with JavaScript. That approach is also used when styling `` dropdowns. – morkro Jul 18 '14 at 20:48

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.