disable scrolling when keyboard opens up for ion-input

Question

I have a vue ionic app and I have an ion-input in one of the view. When I focus into the input, the keyboard opens up and scrolls the view little upward. I don't want it to scroll upwards and wants it to be fixed where the view before focusing on the input. I'm using Vue 2 and ionic 5

This is my code

<template>
  <ion-page>
    <ion-content class="ion-padding" ref="content">
       <ion-input maxlength="1" ref="nums"
          autofocus="true"
          class="num-input"
          type="number"
          v-on:keyup="added($event, index)"
          @ionFocus="onKeyFocus"
          v-for="index in 4" :key="index"></ion-input>
    </ion-content>
  </ion-page>
</template>

<script>
export default {
methods: {
    onKeyFocus(){
      this.$refs.content.style.overflow = 'hidden';
    },
 }
}
</script>

I tried using scrollAssist: false too in main.js file

Vue.use(Ionic, { mode: 'ios', scrollAssist: false });

score 0 · Answer 1 · answered Aug 08 '23 at 17:48

In your main.js (or equivalent entry point) where you configure your Ionic app, you can set the global config to disable the scroll assist:

import { createApp } from 'vue';
import { IonicVue } from '@ionic/vue';

const app = createApp(App)
.use(IonicVue, {
    mode: 'ios', // Adjust this based on your platform
    scrollAssist: false,
});

app.mount('#app');

To prevent the content from scrolling when the keyboard opens, you can use the Ionic Lifecycle events in combination with setting the fullscreen attribute on ion-content. Here's how you can modify your component:

<template>
<ion-page>
    <ion-content class="ion-padding" ref="content" fullscreen>
    <ion-input maxlength="1" ref="nums"
        autofocus="true"
        class="num-input"
        type="number"
        v-on:keyup="added($event, index)"
        @ionFocus="onKeyFocus"
        v-for="index in 4" :key="index"></ion-input>
    </ion-content>
</ion-page>
</template>

<script>
export default {
methods: {
    onKeyFocus() {
    // If you want to prevent the entire page from scrolling
    // this.$refs.content.setAttribute('fullscreen', 'true');
    },
},
};
</script>

<style scoped>
/* You can adjust these styles based on your needs */
ion-content[fullscreen] {
overflow: hidden !important;
}
</style>

disable scrolling when keyboard opens up for ion-input

1 Answers1