I would like to copy to clipboard a value of selected option from select list using jQuery or JavaScript.
My html:
<select id="choose-color">
<option value="red">RED</option>
<option value="green">GREEN</option>
<option value="yellow">YELLOW</option>
<option value="black">BLACK</option>
</select>
The value should be copied to clipboard when the user choose any option. I tried to use clipboard.js plugin but it seems not working with select list.
You need input to make copy to clipboard. I have create an input on the change event and removed it after copying the value into clipboard.
Basically you need two function for copy to clipboard .i.e select() and execCommand(). The select() method is used to select the contents of a text field. And execCommand() method executes the specified command for the selected part of an editable section.
Here is an working example.
$('#choose-color').on('change', function(){
var value= `<input value="${$(this).val()}" id="selVal" />`;
$(value).insertAfter('#choose-color');
$("#selVal").select();
document.execCommand("Copy");
$('body').find("#selVal").remove();
});black<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="choose-color">
<option value="red">RED</option>
<option value="green">GREEN</option>
<option value="yellow">YELLOW</option>
<option value="black">BLACK</option>
</select>
You need to create a temporary element say textarea to set the value of the select and use that to copy the value. After it has been copied to clipboard remove that textarea element.
$('#choose-color').change(function(){
var textarea = $('<textarea />');
textarea.val($(this).val()).css({
visibility: 'none'
}).appendTo('body');
textarea.focus().select();
if (document.execCommand('copy')) {
textarea.remove();
return true;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="choose-color">
<option value="red">RED</option>
<option value="green">GREEN</option>
<option value="yellow">YELLOW</option>
<option value="black">BLACK</option>
</select>
Using the copy() function in this great answer you can easily do the copy to clipboard for dropdown also,
document.getElementById('choose-color').onclick = function () {
let text = this.value;
var input = document.createElement('input');
input.setAttribute('value', text);
document.body.appendChild(input);
input.select();
var result = document.execCommand('copy');
document.body.removeChild(input)
return result;
}
You can use document.execCommand('copy') to do that.
https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f
