How to create copy-paste event in JavaScript?

Question

I want to create a copy-paste event from the console. Here is what I did till now:

var body = document.getElementsByTagName('body')[0];

var copybutton = document.createElement('button');
copybutton.id = 'copybutton';
copybutton.innerHTML = 'Copy';
body.appendChild(copybutton);

var pastebutton = document.createElement('button');
pastebutton.id = 'pastebutton';
pastebutton.innerHTML = 'Paste';
body.appendChild(pastebutton);

var copyarea = document.createElement('textarea');
copyarea.id = 'copyArea';
copyarea.innerHTML = 'text1';
body.appendChild(copyarea);

var pastearea = document.createElement('textarea');
pastearea.id = 'pasteArea';
pastearea.innerHTML = '';
body.appendChild(pastearea);


// Here will be the function codes


document.getElementById('copybutton');
document.getElementById('pastebutton');

I created 2 text areas and 2 buttons. What I do want to do is, I want to copy the text inside of the text1 area with clicking the copy button and paste it inside of the '' area with clicking the paste button.

You've done the setup but not really attempted the main part of what you're trying to do. All you need to do is shovel one textarea value to another - there's no actual copy/paste/events going on so it's quite simple. Have a go... — Mitya, Nov 20 '20 at 14:31
Hi, @Mitya thanks for commenting out. The problem is, I could not write a good code for the paste function :/ — osmancalisir, Nov 20 '20 at 17:34
The paste function should do the following: 1) grab the `value` of the first textarea; 2) set the `value` of the second textarea (with the grabbed value from step 1). — Mitya, Nov 21 '20 at 11:27

Ozgur Sar · Accepted Answer · 2020-11-20T15:00:59.517

In this snippet copy works fine but in Chrome you will need to set the clipboardRead permission to use document.execCommand('paste')

You can read more about it here

var body = document.getElementsByTagName('body')[0];

var copybutton = document.createElement('button');
copybutton.id = 'copybutton';
copybutton.innerHTML = 'Copy';
body.appendChild(copybutton);

var pastebutton = document.createElement('button');
pastebutton.id = 'pastebutton';
pastebutton.innerHTML = 'Paste';
body.appendChild(pastebutton);

var copyarea = document.createElement('textarea');
copyarea.id = 'copyArea';
copyarea.innerHTML = 'text1';
body.appendChild(copyarea);


var pastearea = document.createElement('textarea');
pastearea.id = 'pasteArea';
pastearea.innerHTML = '';
body.appendChild(pastearea);


// Here will be the function codes


var copyBtn = document.getElementById('copybutton');
var copyText = document.getElementById('copyArea');
var pasteBtn = document.getElementById('pastebutton');
var pasteText = document.getElementById('pasteArea');



copyBtn.addEventListener('click', copyFunction)

function copyFunction() {
  copyText.select();
  copyText.setSelectionRange(0, 99999); /*For mobile devices*/
  document.execCommand("copy");
}

pasteBtn.addEventListener('click', pasteFunction)

function pasteFunction() {
  pasteText.focus();
  document.execCommand("paste");
}

Hi @ozgur, it is a really good answer but the paste button does not seem works :( — osmancalisir, Nov 20 '20 at 17:33

How to create copy-paste event in JavaScript?

1 Answers1