Restrict input to single digit in vuejs

Question

I have an input in VueJS which is bound using v-model e.g.

<input type="number" v-model.number="testinput">

I want to place a restriction on this input, so that it can only be a single digit, between 1 and 6. As soon as a single digit is in the box, additional key presses should have no effect. Entering an invalid digit such as 9 should also have no effect.

I'm not sure what the best approach to this would be, do I need a directive, filter, event handler, or maybe make a new custom input component?

Korgrue · Accepted Answer · 2017-11-20 22:53:36Z

1

Set the maxlength property to 1 on the input field (this will restrict to single characters).
Add the proper regex to the input field using the pattern property. (This will check that the input has only 1 character, and is using numbers 1-5.
```
 <input type="number" maxlength="1" pattern="([12345])\w{0}" v-model.number="testinput">
```

edited Nov 20, 2017 at 22:53

answered Nov 20, 2017 at 22:48

Korgrue

3,4781 gold badge15 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

Restrict input to single digit in vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related