[Vuejs]-Disable scrolling when keyboard opens up for ion-input

by

0👍

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>

Leave a comment