How can I paste clipboard data after changing it in react?

Question

I have defined the following event handler for the component

<Editable
  onKeyDown={(event) => handleChange(event)
  onPaste={(event) => handlePaste(event)}
/>

Within the event handler I'd like to stop the event from being dispatched and change the data of the clipboard. What I'm missing is how to change the data and how to dispatch it after changing it.

The ultimate goal is to restrict the number of characters a user can type in.

const handlePaste = (event) => {
  event.preventDefault();
  let data = event.clipboardData.getData('Text');
  // Changing the data here
  // pasteing the data as input to Editable
};

I'd be glad over any kind of help!

ahh you mean I don't even need it, that could work. To test it however I'd need to know how to change the data first ;) I'll try again to find that out Thank you — charlie_7521, Jun 22 '21 at 12:11

score 1 · Answer 1 · answered Jan 28 '22 at 07:09

I've struggled finding a good solution for this. Most answers I found focus on only getting the paste content from the event.

MSDN has a good example for vanilla.js: https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event

In react, we need to use the modified value in some React way (call callback, function, dispatch action, etc.).

Here's an example:

const handleOnPaste: React.ClipboardEventHandler = useCallback((event) => {
        const pasteContent = event.clipboardData.getData('text');

        // Modify it
        const modified = pasteContent.toUpperCase();

        // This is important. You want to prevent the original one from bubbling.
        event.preventDefault();

        // You need to use the new modified value manually. Some examples:

        // Controlled component - has a callback to set value
        onChange(modified);

        // Has a state value
        setValue(modified);

        // You have a ref to the input (or other) element
        ref.current.value = modified ;
    }, [...]);

score -3 · Answer 2 · answered Jun 22 '21 at 14:29

-3

This is how it could be done:

const handlePaste = (event) => {
  // 1. Remove the event.preventDefault();

  let data = event.clipboardData.getData('Text');

  // 2. Edit the data by just overwriting data field
  data = data.substring(2) // Omitting the first character;
  
};

answered Jun 22 '21 at 14:29

Hassan Naqvi

933
5
18

1

This can never work. All you're doing is modifying a local string without using it in any way. The most important part is how to pass this modified data into the next event handler - usually onChange. – bmakan Jan 26 '22 at 10:52
This was quite a while ago I posted this. I think it should work. You can test it if you want. The question asked is how to paste the data but edit it before pasting and I think the answer I posted would do the job. – Hassan Naqvi Jan 27 '22 at 12:51
Paste is a tricky event to handle. Based on the research I did on it, the only way to do it, is to prevent the default handling and then use it manually. E.g., select the input element and set it's value to the modified content. You can also call value setting functions. E.g., `onChange`, `setValue`, etc. I stand by my comment. You're not doing anything with the modified value. It will never reach the `onChange` event handler of the input component. You only answered on how to modify it. Not actually use it - which is the tricky part. – bmakan Jan 28 '22 at 06:58

How can I paste clipboard data after changing it in react?

2 Answers2