How to copy data from select to clipboard without plugins, etc.?

Question

So, the question is:

Is it possible to copy data from select element without additional plugins(jQuery is ok, but nothing else), like there:

https://stackoverflow.com/a/30810322/5490451

The main problem is here:

var copyTextarea = document.querySelector('.js-copytextarea');
copyTextarea.select();

If we work with textarea - everything is fine, but for select it's not applicable. I can't select the data inside the select element.

Any ideas, guys?

Use case: I want to set a function on onchange event for select element with a list of values, copy these values, and paste into textarea or another element, it doesn't matter

Why not `doument.getElementById("sel1").onchange=function() { this.form.textarea1.value=this.value }` — mplungjan, Jan 25 '16 at 14:29
it's not too easy. I'll need to insert this data to place, where user will click. for example, we have some text in `textarea`: `Hello, it's amazing day!`, and selected value in `select` is `world, `.User clicks after comma in `textarea` and new value is: `Hello, world, it's amazing day!`. Something like this — pivanchy, Jan 25 '16 at 14:39
Why do you need the clipboard to put the value into another element? — epascarello, Jan 25 '16 at 14:39
So again, why does it need to be in the clipboard unless the user is also hitting ctrl-V or you can just listen for ctrl-V and do the insert yourself. — epascarello, Jan 25 '16 at 14:46
@epascarello, to many life of a user easier. He selects only value in `select` element, clicks in `textarea` and value is paste in the clicked position(I guess, it could be another issue, to detect the position, but, for now it's not an actual issue) — pivanchy, Jan 25 '16 at 14:49
Only problem with clipboard is security restrictions. Hence why Google Docs has a plugin to make copy/past work flawlessly. — epascarello, Jan 25 '16 at 14:51
@epascarello, what could be a risk in case of copy predefined data from `select` to `clipboard`? — pivanchy, Jan 25 '16 at 14:53
You go to any site and they randomly clear your clipboard that has data you wanted. — epascarello, Jan 25 '16 at 14:54
@epascarello, I'll not save super secret data to clipboard, only predefined values. like only one or two words, nothing special — pivanchy, Jan 25 '16 at 14:56
Seems you need to detect where is clicked and simply insert the selected value. Can be do without clipboard using ranges - http://stackoverflow.com/questions/1064089/inserting-a-text-where-cursor-is-using-javascript-jquery — mplungjan, Jan 25 '16 at 15:49
@mplungjan, it looks like you're right. I've never heard about ranges, but looking for solutions to insert data in selected position, I've found awesome example: http://jsfiddle.net/Znarkus/Z99mK/. It looks like it's, what I need — pivanchy, Jan 25 '16 at 15:53
I used ranges as a final solution of my task, using this example: http://jsfiddle.net/Znarkus/Z99mK/ — pivanchy, Jan 25 '16 at 18:51

Marcos Casagrande · Accepted Answer · 2016-01-25T15:45:37.710

2

Check this: This function creates a temporal textarea to perform a clipboard copy.

function copyToClipboard(text) {

  var textarea = $('<textarea />');
  textarea.val(text).css({
    width: '0px',
    height: '0px',
    border: 'none',
    visibility: 'none'
  }).appendTo('body');

  textarea.focus().select();

  try {
    if (document.execCommand('copy')) {
      textarea.remove();
      return true;
    }
  } catch (e) {
    console.log(e);
  }

  textarea.remove();
  return false;
}

$("select").on("change", function(){
   if(!copyToClipboard($(this).val()))
       console.log("Copy failed"); //Do something
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
<option>Select</option>
<option value="Copy me!">Copy me!</option>
</select>

Check document.execCommand('copy') browser support.

edited Jan 25 '16 at 15:45

answered Jan 25 '16 at 14:29

Marcos Casagrande

37,983
8
84
98

it works as I expect, but I'll wait for some other solutions, maybe without additional temporary elements – pivanchy Jan 25 '16 at 14:43
1

Glad it worked for you, but I don't think it is possible otherway, usually plugins that allow yo to copy to clipboard, use Flash, which is worse than creating a temporary textarea, IMHO. – Marcos Casagrande Jan 25 '16 at 15:36
totally agree about flash – pivanchy Jan 25 '16 at 15:39
I'll accept your answer, as it really works as I described in my question, but for general solution of my main idea: `insert selected value from `select` element into `textarea` by position, after clicking on the `textarea` I used ranges(it doesn't need copying to clipboard, etc.) – pivanchy Jan 25 '16 at 18:50
Thanks, I provided what you asked ;). Anyhow if you still have problems with the inserting the text into a specific position of the textarea, please make a new question and let me know, so I can give you a hand ;) – Marcos Casagrande Jan 25 '16 at 18:54
I decided this issue, see my comment under my question :) – pivanchy Jan 25 '16 at 18:55
I rarely read comments, and specially never when there are many of them :P, I'll check them now. – Marcos Casagrande Jan 25 '16 at 18:57
With large amounts of data you need to wrap the code after append with a timeout with no wait. – Brandon Seydel Nov 15 '17 at 15:07

How to copy data from select to clipboard without plugins, etc.?

1 Answers1