Prevent paste event in Reactive web apps


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) {
    return false;

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

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



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.



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.

Hello Bogdan!

I have the same problem. When the user paste some value in the input the mask did the format, but the value between the screen and the variable is different. How do you solve this problem?


I know that I am answering a little bit late for most of you, but the solution I found is:

1) Suppose that you have a variable named textVar binded to an input text:

2) Create an onPaste event :

3) On the OnPaste action, add the following javascript:

document.getElementById($parameters.InputId).value = $parameters.InputVar

where InputId is the input texbox widget Id and InpuVar is the variable binded to that input textbox.

This way, paste is ignored.

Hope this could help.

I tried that. Couldn't work.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.