[Vuejs]-How to accept only four number in q-input in quasar?

by

0👍

✅

Just found out there is maxlength in q-input api

maxlength="4"

do the trick

<q-input class="q-mx-md" style="width: 20%;" maxlength="4"  :input-style="{letterSpacing:'50px'}" dense square filled  v-model="emailCode" />

0👍

You should use a mask instead:

<q-input
  v-model.number="pin"
  inputmode="numeric"
  mask="####"
/>

const app = Vue.createApp({
  data()
  {
    return {
      num: null,    
    }
  }
})

app.use(Quasar, { config: {} })
app.mount('#q-app')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@quasar/extras/material-icons/material-icons.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quasar@2/dist/quasar.prod.css">
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2/dist/quasar.umd.prod.js"></script>

<div id="q-app">
<div class="q-pa-md">
  <q-input v-model.number="num" mask="####" label="test" inputmode="numeric" outlined></q-input>
</div>
</div>

Leave a comment