How to Retrieve Clipboard Data During Paste Events in JavaScript Across Different Browsers?

Other Questions JavaScript
1

How can I implement a feature in my web application that listens for paste events and extracts the data being pasted? My goal is to strip out any HTML formatting before inserting the text into a rich text editor. While I can modify the text after it’s already pasted, this approach removes all existing formatting. For instance, I can highlight text in the editor, but pasting new text eliminates this style. I need a solution that cleans the incoming pasted text while preserving all prior formatting. It’s essential that this feature functions seamlessly across major browsers like Internet Explorer, Firefox, Chrome, and Safari. I am aware that Internet Explorer offers clipboardData.getData(), but I haven’t identified similar capabilities in other browsers.

2

You can achieve this using the paste event listener. Here’s a simple example that works across most modern browsers:

window.addEventListener('paste', function(event) {
    let pasteData = (event.clipboardData || window.clipboardData).getData('text');
    console.log('Pasted data:', pasteData);
});

This code listens for paste events and retrieves the clipboard text data.