How to prevent paste of letters in Input text
Application Type
Reactive

Hello everyone,

Im trying to make some script to prevent paste of letters, only numbers are allowed. On Keyup already implemented but for paste I still can't. Someone have idea how i can reach that?

Thanks in advance.

Paulo Torres

Solution

So... I couldn't sleep :D, and I manage to find a solution(i think) to not let paste letters. In this case, I could find three options. The ones on the comment you can concatenate and even if it has a number it will be added to the input.

The last one where the regex it says if just numbers on the string if there is a letter you will have an output of false. And what I did was put a preventDefault to not paste.

I wanted to include this version module and add another one to the previous post, but right now is not possible but it is on the ideas already. I will post here a version where it sees if it is a number or not and if it is a number paste if it is not he doesn't pass.

I did the most difficult, which was implementing everything and see if it works with the regex, and every time he pastes something he sesses what is coming with the help of clipboardData property, THIS IS THE SECRET!

you just need to adapt the regex for what you want. In this case, if it has a letter on what you want to paste, it will return false and trigger the preventDefault();

Thank you I already learned a lot with this.

Let me know if I could help you

Kind regards,

Márcio

preventPASTEVersion2.oml

Hi Paulo,

I think João Pais's suggestion at the very end of this post might work. I havent given it a shot myself but it seems like it would work with a little customization. I understand it is not the exact solution, but just wanted to give you an idea of how it could be done.

Regards,

AJ


Hey there!

Here you have one more solution, give it a try!

Not like the solution of AJ(is a good approach too) but one that has a listener waiting for a paste, and if there is it will do a preventDefault for the input you want basing on the ID.

Give it a try:

https://marcio-carvalho4.outsystemscloud.com/preventPASTE/Screen1?_ts=637624178564975021

Kind regards,

Márcio

preventPASTE.oml

Solution

So... I couldn't sleep :D, and I manage to find a solution(i think) to not let paste letters. In this case, I could find three options. The ones on the comment you can concatenate and even if it has a number it will be added to the input.

The last one where the regex it says if just numbers on the string if there is a letter you will have an output of false. And what I did was put a preventDefault to not paste.

I wanted to include this version module and add another one to the previous post, but right now is not possible but it is on the ideas already. I will post here a version where it sees if it is a number or not and if it is a number paste if it is not he doesn't pass.

I did the most difficult, which was implementing everything and see if it works with the regex, and every time he pastes something he sesses what is coming with the help of clipboardData property, THIS IS THE SECRET!

you just need to adapt the regex for what you want. In this case, if it has a letter on what you want to paste, it will return false and trigger the preventDefault();

Thank you I already learned a lot with this.

Let me know if I could help you

Kind regards,

Márcio

preventPASTEVersion2.oml

Hi Guys,

Thanks for the answers. Anyway I want to prevent PASTE just letters. I want to let paste only numbers.

Thanks in advance :)

Did you check my last answer, Paulo? It doesn't let you past letters, just numbers.

https://marcio-carvalho4.outsystemscloud.com/preventPASTE/Pasting?_ts=637624263342766503

Tell me if is this

Kind regards,

Márcio

Hello Marcio,

First of all THANKS A LOT for your help and effort. I'm checking now the code :)

You are the BEST

No problem :), if there is something wrong or some misunderstanding from my side, let me know

Kind regards,

Márcio

Hello again Marcio,

I'll explaining better my application. I have a widget for code confirmation and I already have a script to split the text from the clipboard and paste in each input field.

I join your script with mine and it works very well


Now I have this:


Another challenge would be remove the letters from clipboard but it's not necessary. Just a crazy idea!

You ROCK

First, Thank you very much :) I am very happy that I could help you, I can say that I have learned a lot from this challenge! :)

Second, So the other challenge was if I copy letters and numbers, it just passes the numbers and not the letters?

Is that right?

And I'm very happy because I lost many time trying without good solution and you can very fast, ahahah.

I also learned a lot with this widget, so it's good.

Yes, you understand very well the next crazy idea, ahahah.

You already have that in the code I passed you, you just need this.

You are going to use the regex that I am using in the image and add that data.match( regex ).join('');

And then you use this just to show your results, I don't know yet how to set Data, and I tried, but right now I don't have the time to see it

var stringWithNumbers=data.match( regex ).join('');

console.log(stringWithNumbers);

With this, you can see joining everything that is number :)

The trickiest part now is past the input.


I saw here the solution :D

https://stackoverflow.com/questions/1183903/regex-using-javascript-to-return-just-numbers


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