QInput - prevent Android's soft keyboard from showing automatically



  • I’m using the code provided at https://quasar.dev/vue-components/date to get a date from user input.
    My problem is that on Android clicking on the date input field will bring up the calendar as well as the soft keyboard - and I don’t want the keyboard to show up since it’s not needed for selecting a date.

    Is there any way to stop the keyboard from showing up when clicking a q-input field or at least a way to hide it immediately?

    Code:

    <template>
      <div class="q-pa-md" style="max-width: 300px">
        <q-input filled v-model="date" mask="date" :rules="['date']">
          <template v-slot:append>
            <q-icon name="event" class="cursor-pointer">
              <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
                <q-date v-model="date" @input="() => $refs.qDateProxy.hide()" />
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          date: '2019/02/01'
        }
      }
    }
    </script>
    




  • @metalsadman Thank you, this works well for me. So is there no way to prevent the keyboard popup with qinput?



  • @btree there might be, but that would be a hack, qinput uses native input internally, keyboard popping on mobile is normal behavior so, you will have to search out there how to do that.