How to limit a max number for a NUMBER input in vue?

Question

I am now trying to create a new input which will reject if the number user type in exceed the limit but it is not working the

let say the max number is 99 Currently my best way is to create something like this

<input
    type="text"
    :maxlength="2"
    aria-controls="none"
    class="number-field-input"
    inputmode="numeric"
    pattern="/d+"
    v-model="inputOne"
  />

This will limit the max number to 99 since the max length is 2 but I don't want something like this I want something like this but its not working

<input
        type="number"
        min="1"
        max="99" //may not be 99 but something between 1 and 99
        aria-controls="none"
        class="number-field-input"
        inputmode="numeric"
        pattern="/d+"
        v-model="inputOne"
   />

not working how? may not be 99 but something between 1 and 99, then set min=2, max=98 — Lawrence Cherone
– Lawrence Cherone, Commented Sep 18, 2022 at 17:37
For example the max number 150 when user type in 201 I want the number to automatically convert to 150. Right now even user type in 1000 it still passing — Khant
– Khant, Commented Sep 18, 2022 at 17:39
yeah thats normal, add a watcher, watch: {inputOne(v){if(v<1) v = 1; if(v>99) v = 99; }} — Lawrence Cherone
– Lawrence Cherone, Commented Sep 18, 2022 at 17:45

Nikola Pavicevic · Accepted Answer · 2022-09-18 17:55:03Z

5

You can use watcher :

const { ref, watch } = Vue
const app = Vue.createApp({
  setup() {
    let inputOne = ref(0)
    watch(inputOne,
      (newValue) => {
        inputOne.value = newValue > 99 ? 99 : newValue
      },
    );
    return { inputOne };
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<div>
  <input
    type="number"
    min="1"
    max="99" 
    aria-controls="none"
    class="number-field-input"
    inputmode="numeric"
    pattern="/d+"
    v-model="inputOne"
   />
</div>

answered Sep 18, 2022 at 17:55

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

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

1 Comment

Lawrence Cherone Over a year ago

need to include -9999

Rohìt Jíndal · Accepted Answer · 2022-09-19 08:26:47Z

1

You can simply achieve that by single line of code with the help of @input event.

Live Demo :

new Vue({
  el: '#app',
  data: {
    value: 0
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="number" v-model="value" @input="() => { if(value > 150 || value < 0) { value = 150 }}">
</div>

answered Sep 19, 2022 at 8:26

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

Comments

ahmet ilboga · Accepted Answer · 2024-03-07 06:11:13Z

I use it like this:

import { ref } from 'vue'

const min = ref(50)
const max = ref(50)
const maxError = ref(false)

const validateMin = () => {
  maxError.value = false
  if (min.value < 50) {
    min.value = 50
  } else if (min.value > 20000) {
    min.value = 20000
  } else if (min.value > max.value) {
    maxError.value = true
  }
}
const validateMax = () => {
  maxError.value = false
  if (max.value < 50) {
    max.value = 50
  } else if (max.value > 20000) {
    max.value = 20000
  } else if (max.value < min.value) {
    maxError.value = true
  }
}

Html Code:

                  <label for="min">En Az</label>
                  <input
                    type="number"
                    name="min"
                    id="min"
                    v-model="min"
                    @blur="validateMin()"
                    placeholder="En az"
                  />
         
                  <label for="max">En Çok</label>
                  <input
                    type="number"
                    name="max"
                    id="max"
                    v-model="max"
                    @blur="validateMax()"
                    placeholder="En fazla"
                  />
              

                <small v-if="maxError" class="col-span-2 text-red-600"
                  >Max değeri Min değerinden küçük olamaz!</small>

Collectives™ on Stack Overflow

How to limit a max number for a NUMBER input in vue?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related