如何在JavaScript中创建复制粘贴事件



我想从控制台创建一个复制粘贴事件。以下是我到目前为止所做的:

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');

我创建了2个文本区域和2个按钮。我想做的是,我想通过单击复制按钮将文本复制到text1区域内,并通过单击粘贴按钮

在这个片段中,copy工作正常,但在Chrome中,您需要设置剪贴板读取权限才能使用document.execCommand('paste')

你可以在这里阅读更多关于

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");
}

最新更新