How to allow editing only numbers after dot in input tag?-CodePudding

Currently I have an input tag and there I only allow numbers like 0.1, 0.123, 0.2,.... (numbers like that). I use react-hook-form for this input tag. `

 <input
      type="text"
      {...register("version")}
      onChange={(e: any) => {
       setValue("version", e.target.value)
      }}
      className={`form-control project-form-control rounded-0 input-digga2 ${
       errors.version ? "is-invalid" : ""
       }`}
      name="version"
      pattern="[0-9.]"
      />

And what I want to do when I do onChange is there a way I can only allow the user to change the numbers after the dot and it will still remain "0.".

CodePudding user response：

You can use regexp, as I show you below.

if (value.match(/\w\../) && !value.match(/[A-Za-z]\.\d/)) {
      return;
}

I created a sandbox code and it works, check it out:

https://codesandbox.io/s/stackoverflow-response-or8pzh

I also reorder your code to improve the good reading of your code. Let me suggest to you something when you're working with react.

Avoid putting functions and validations in your render-HTML-syntax code, this is one of the reasons why a lot of developers have problems understanding the code.