Hello,


I'm currently facing an issue in trying to prevent the paste (onpaste) event from triggering inside some input fields. Note that I'm also using a decimal mask component for these fields. I've looked in lots of places for a solution, but it seems I cannot achieve what I want. Below is the JS code I'm currently trying to use in OnReady action for the webblock where these fields are present, but with no success


amountFrom = document.getElementById($parameters.AmountFromId);
amountFrom.onpaste = function(e) {
    e.preventDefault();
    return false;
};

amountTo = document.getElementById($parameters.AmountToId);
amountTo.onpaste = function(e) {
    e.preventDefault();
    return false;
};


Please let me know what is the proper way of preventing similar events in Reactive applications.


Regards,

Bogdan

Were you able to find a solution?

If not, could you explain a little more about what you're trying to achieve by preventing paste? Is it that the mask you're using isn't working when the user pastes text?

I tend to be skeptical of attempts to circumvent the way browsers are meant to be used, because in many cases these don't work as intended, they frustrate users, and they sometimes lead to edge-case bugs that are hard to diagnose.

Perhaps there's another way to achieve the end result you're looking for.

Hello Andrew,


No, I was not able to find a solution yet, the only workaround I found is to put an onpaste event on the masked input field that uses a javascript to set the variable value (the one used in the input) according to the value property of the input

$parameters.Value = document.getElementById($parameters.InputId).value;

The problem is that I'm currently using MaskCurrency webblock from InputMaskReact component on Forge and it works fine, excepting the case a user copy+pastes a value inside the masked input field. It is somehow cleared out and I'm guessing is because some other event handling in the JS code behind the mask, like onKeyDown.That's why we thought of removing completely the paste event from that input, since it is not crucial for the users, but I still couldn't achieve this.


Regards,

Bogdan

I see that you have posted to the support forum for that component already.

Did you happen to open up the component and look into how it's functioning? I'm just wondering whether perhaps you might see how the underlying React component is working, and whether perhaps you could customize that to better handle the pasting of a value.

Actually I wanted to, but didn't have time, so I let it be as it is for the moment. I'm sure that there might be a way of modifying the code behind the component and achieving the expected result, but due to other priorities I didn't spend more time on it.