Menu
I'm faced a problem with creating a ClipboardEvent from code. clipboardData object in created event not defined.
May be somebody know something about it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input id="testPasteInput">
<button onclick="pasteFromCode()">Paste</button>
<script>
const testPasteInput = document.getElementById('testPasteInput');
testPasteInput.addEventListener('paste', ({clipboardData}) => console.log(clipboardData.getData('text')));
function pasteFromCode() {
const clipboardEvent = new ClipboardEvent('paste', { dataType: 'text/plain', data: '123' });
testPasteInput.dispatchEvent(clipboardEvent);
}
</script>
</body>
</html>
398
This is a browser specific issue. Your code works fine in Firefox, but clipboardData is not being set correctly in webkit browsers like Chrome and Safari.
I have created this fiddle with your code, which can be tested in Firefox to verify that it is working there.
Actually ClipboardEvent is an experimental technology, which is not yet fully supported by all the major browsers. The usage of event creation using the constructor(like new ClipboardEvent('paste')) itself is not yet supported in Internet Explorer. Tthe same can be verified from the image below from MDN-documentation for browser compatibility
But, Chrome has provided support for the all three, and therefore it is their bug. I have reported a bug here in Chrome bug report dashboard for the same. Hopefully they will pick it up and fix the issue in any of their upcoming releases.
171
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
