JSFiddle - React, Tailwind, and code Playground

by 亮 薛

HTML

<textarea name="copy" cols="30" rows="5">Copy me!</textarea>
<br>
<button type="button" id="copy">复制到剪贴板</button>
<br>
<textarea name="paste" cols="30" rows="5"></textarea>
<br>
<button type="button" id="paste">粘贴</button>

JavaScript

var $copyBtn = document.getElementById('copy');
var $pasteBtn = document.getElementById('paste');
$copyBtn.addEventListener('click', function(event) {
  try {
    var pasteEvent = new ClipboardEvent('paste');
    console.info(pasteEvent.clipboardData);
  } catch (e) {
    alert(e);
  }
  console.info(event.clipboardData);
});

/*document.addEventListener('copy', function(e){
    e.clipboardData.setData('text/plain', 'Hello, world!');
    e.clipboardData.setData('text/html', '<b>Hello, world!</b>');
    e.preventDefault(); // We want our data, not data from any selection, to be written to the clipboard
});*/
document.addEventListener('paste', function(event){
console.info(event.clipboardData.getData('text/plain'));
});
$copyBtn.addEventListener('click', function(event){
	var value = document.getElementsByName('copy')[0].value;
  alert(value);
	var clipboardEvent = new ClipboardEvent('paste', {dataType: 'text/plain', data: value});
  document.dispatchEvent(clipboardEvent);
});
alert(window.clipboardData);
alert(ClipboardEvent.clipboardData);