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"
   />

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"
   />

• javascript
• vue.js
• vuejs3

• not working how? may not be 99 but something between 1 and 99, then set min=2, max=98 – 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 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 Commented Sep 18, 2022 at 17:45

3 Answers 3

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./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>

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./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>

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>