How to limit digit number in vue input?

Question

My goal is to limit the number of digit user can enter in the input field. So a user can only input 10 digits. I tried min and max still doesn't work

Here's the code

        <input
          v-model="amount"
          type="number"
        >


        <script>
             export default {
                  data() {
                      return { 
                          amount: 7800
                      }
                   }

              }

        </script>

Right now i can add more than 10 digits

Possible duplicate of How to apply min/max attribute to v-model in Vue? — Noor A Shuvo
– Noor A Shuvo, Commented May 8, 2019 at 5:41

Amarat · Accepted Answer · 2019-05-08 06:08:23Z

34

Replace this:

<input v-model="amount" type="number">

to

<input v-model="amount"
        oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
        type = "number"
        maxlength = "10"
/>

answered May 8, 2019 at 6:08

Amarat

6305 silver badges12 bronze badges

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

1 Comment

Dave Oakley Over a year ago

Great, been searching for this for several hours.

ittus · Accepted Answer · 2019-05-08 06:58:31Z

24

We can control the value of <input> manually:

 <input
  type="number"
  :value="amount"
  @input="updateValue"
/>

and check in updateValue method:

  data() {
    return {
      amount: 7800
    }
  },
  methods: {
    updateValue(event) {
      const value = event.target.value
      console.log(value, this.amount)
      if (String(value).length <= 10) {
        this.amount = value
      }
      this.$forceUpdate()
    }
  }

Note that this.$forceUpdate() is used to make component re-render when user input more than 10 characters.

Demo on Codepen

edited May 8, 2019 at 6:58

answered May 8, 2019 at 6:34

ittus

22.5k5 gold badges62 silver badges59 bronze badges

4 Comments

sinusGob Over a year ago

This doesnt work if i put v-model="amount" which I need to put

ittus Over a year ago

I updated the answer. v-model is a shorthand for :value and @input

sinusGob Over a year ago

I see, weird that v-model doesnt work for @input but :value does work thanks

Eugene Karataev Over a year ago

This answer solved my issue, but I can't run away from a thought that this is a hack. Documentation says If you find yourself needing to force an update in Vue, in 99.99% of cases, you’ve made a mistake somewhere.. Is there a better way to solve this issue in 2021?

Christine Treacy · Accepted Answer · 2023-04-24 13:49:59Z

3

You can also do this inline:

<input type='number' v-model='trademark' class='form-control' @input="trademark = trademark.slice(0,10)"/>

answered Apr 24, 2023 at 13:49

Christine Treacy

2223 silver badges10 bronze badges

Comments

Carlos Salles · Accepted Answer · 2020-12-15 19:05:11Z

2

Put a condition on Updated, checking the digits, if surpasses it, cut it. I did something similar, but for max value, not digits, but i think its the same logic:

updated() {
    if (this.album.max_colorized > this.maxPictures) {
        this.album.max_colorized = this.maxPictures;
    }
}

This way if it surpasses the max, change to max.

answered Dec 15, 2020 at 19:05

Carlos Salles

5144 silver badges6 bronze badges

Comments

Evidence Ekanem · Accepted Answer · 2023-03-10 03:30:32Z

1

Here in 2023 and I realized that there's no need to listen to an input event or use the updated hook.

Simply use the maxlength attribute for form inputs. An example of usage is:

 <input type="text" maxlength="10" v-model="myModel" />

If you need the length to be dynamic, then use this:

<input type="text" :maxlength="max" v-model="myModel" />

data: () => ({
      max: 10
 })

answered Mar 10, 2023 at 3:30

Evidence Ekanem

1491 silver badge8 bronze badges

6 Comments

Christine Treacy Over a year ago

OP can't just use maxlength because their input type is number.

Evidence Ekanem Over a year ago

@ChristineTreacy have you been able to limit the digit number on the input field? I believe it would also work on input type of number

Christine Treacy Over a year ago

I came looking for a solution because maxlength does not work when they input type = number. Here's the solution I posted: <input type='number' v-model='trademark' class='form-control' @input="trademark = trademark.slice(0,10)"/>

Evidence Ekanem Over a year ago

wow this looks great @ChristineTreacy. please share the link to the post so I can give an upvote

Christine Treacy Over a year ago

Thanks! Glad it worked for you. It did post it the other day. Appreciate the upvote! stackoverflow.com/a/76092625/12488167

|

Daedalus · Accepted Answer · 2023-03-27 06:39:23Z

1

maxlength works with type="text" it seems not to work only with type="number" and it was designed this way. So if it doesn't matter you could go with type="tel" and it should be ok, otherwise only JS

answered Mar 27, 2023 at 6:39

Daedalus

313 bronze badges

Comments

Javed A. Baloch · Accepted Answer · 2024-05-27 16:11:31Z

0

<input
 type="number"
 v-model="slot"
 required
 @change="(e) => handleChange(e, 1, 48)"
/>

<script setup>
const handleChange = (e, min, max) => {
  if (+e.target.value > max) {
    slot = max
  } else if (+e.target.value < min) {
    slot = min
  }
}
</script>

answered May 27, 2024 at 16:11

Javed A. Baloch

1,11815 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to limit digit number in vue input?

7 Answers 7

1 Comment

4 Comments

Comments

Comments

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

4 Comments

Comments

Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related