Vue3/Javascript - Unable to create an input that only excepts numbers

Question

I have a project with a input that only excepts numbers.

Inside the template I have defined a input with the value set to the variable that is being changed and the input being set to the function that checks if it is a number:

      <input
        :value="ie"
        @input="(evt) => changeIE(evt)"
        type="number"
        min="0"
      />

Then in the setup function I have declared a ref ie. This contains the actual value that is being set by the input. I also have declared the `changeIE' function. Here I first get the input text from the evt. Then I check if the last entered character is a number. If not I remove the last character from the string. The next step is to parse the string to an Integer. And lastly I set the value of the variable to the new value of the input.

    const ie = ref('');

    const changeIE = (evt) => {
      let value = 0;
      let input = evt.target.value;

      let isnum = /^\d+$/.test(input[input.length - 1]);

      if (!isnum) input = input.slice(0, -1);

      if (input !== '') value = parseInt(input);

      ie.value = value;
    };

The problem is that the input keeps on excepting non numerical numbers even tough I check if they are numbers and if not I remove that character from the string.

well you created your ref as a string first of all change that to a number and secondly why not use a v-model? :) — halilcakar
– halilcakar, Commented Aug 11, 2021 at 14:59
@halilcakar I cannot use a v-model because there is some extra code that prohibits the use of v-model. — Stephen
– Stephen, Commented Aug 11, 2021 at 15:00
Do you mean you want your field to except numbers (i.e, disallow them) or accept (allow) them? You words say the former but the code says the latter. — kindall
– kindall, Commented Aug 11, 2021 at 15:02
@kindall I was about to edit the title/question for that, but good point, OP could mean either... I just assumed they meant accept. — TCooper
– TCooper, Commented Aug 11, 2021 at 15:17

Boussadjra Brahim · Accepted Answer · 2021-08-11 15:15:06Z

1

Try to use the v-model with number as modifier and set initial value to 0 :

  <input
    v-model.number="ie"
    type="number"
    min="0"
  />

and :

const ie=ref(0)

DEMO

edited Aug 11, 2021 at 15:15

answered Aug 11, 2021 at 15:01

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Stephen Over a year ago

Thanks for the fast response! But because of some code that is not contained with the problem, I cannot use v-model.

Stephen Over a year ago

Even if I use v-model. Then the input still excepts non numerical characters

Stephen Over a year ago

If I use the code you have provides. Then if I enter a non-numerical character into the input it is still shown inside the input.

Stephen Over a year ago

Thanks for the demo. As you can see it is still possible to enter non-numeric characters into the input.

Patfreeze · Accepted Answer · 2021-08-11 15:01:38Z

0

try

const ie = ref(null) // instead of ref('')

By default you set it to a string

answered Aug 11, 2021 at 15:01

Patfreeze

7207 silver badges17 bronze badges

Collectives™ on Stack Overflow

Vue3/Javascript - Unable to create an input that only excepts numbers

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related