#Input value and onInput$ handler.

8 messages · Page 1 of 1 (latest)

smoky goblet
#

Hi, I am working on input component that needs to be type text, but takes only numbers and exactly one dot.

The problem I have met with is that my input value is not strongly correlated with a signal value I am using. So for example:

value={transferredTokenAmount.value}
onInput$={(e) => {
const target = e.target as HTMLInputElement;

               if(target.value.lenght < 5) {
                  transferredTokenAmount.value = target.value;
                }
          }}

So whenever the target.value is longer than 4 signs, the Signal value is not changing anymore - which is correct. However, the input value is still changing, and user can still type.

Is there any way to prevent it?

Ps. I have seen a topic about it, from 21/12/2022 but there were no real solutions.

What I used is:

function replaceNonMatching(
inputString: string,
regex: RegExp,
replacement: string,
): string {
return inputString.replace(
new RegExp([^${regex.source}], "g"),
replacement,
);
}
onInput$={(e) => {
const target = e.target as HTMLInputElement;
const regex = /^\d*.?\d*$/;
target.value = replaceNonMatching(target.value, regex, "");
transferredTokenAmount.value = target.value;
}}

But it is not resolving the problem in 100%.

indigo palm
#

@smoky goblet why not set a maxLength property on the input?

#

Then they could never get past 4 characters, and the signal nor input value would ever change.

smoky goblet
#

That was just an example.
What I am trying to do is creating text input that only allows inserting numbers and one dot

indigo palm
#

Have you tried using the pattern attribute and maxLength?

smoky goblet
#

Yes and it seems like patter does not work.

indigo palm