JSFiddle - React, Tailwind, and code Playground
HTML
<select multiple="multiple" size="10" id="selection" onkeydown="keydown(event)" onchange="changeClipboardValue(this)" >
<option value="test1">Test1</option>
<option value="test2">Test2</option>
<option value="test3">Test3</option>
<option value="test4">Test4</option>
</select>
<input type="text" id="clipboard" onkeyup="keyup(event)" />
CSS
#clipboard {
width: 1px;
height: 1px;
padding:0;
position:absolute;
left:-9999px;
}
JavaScript
window.holdingCTRL = false;
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;
if(window.holdingCTRL) clipboard.select();
}
function keydown(e) {
if(e.keyCode === 17) {
var clipboard = document.getElementById("clipboard");
clipboard.select();
window.holdingCTRL = true;
}
}
function keyup(e) {
if(e.keyCode === 17) {
var selectBox = document.getElementById("selection");
selectBox.focus();
window.holdingCTRL = false;
}
}