IOS-Tastatur blockiert den dynamischen unteren Canvas in Vue 3 mit Bootstrap 5 ⇐ CSS

[Guest]

IPhone-Tastaturblock Bootstrap 5 Unterer Canvas
Beschreiben Sie das Problem
I Ich erstelle ein Vue 3-Projekt mit Bootstrap 5 und habe eine dynamische untere Leinwand (Offcanvas) implementiert, auf der Benutzer Inhalte hinzufügen und mit ihnen interagieren können. Wenn jedoch auf iPhones die Tastatur angezeigt wird (z. B. während der Formulareingabe), blockiert sie die untere Leinwand und verhindert so, dass der Inhalt ordnungsgemäß angezeigt oder darauf zugegriffen werden kann.
Ich habe es mit versucht CSS-Lösungen wie position: Fixed;, Bottom: 0; und Overflow: Auto;, aber sie haben das Problem nicht gelöst. Das Problem scheint spezifisch für die iOS-Verarbeitung von Elementen mit fester Position zu sein, wenn die Tastatur aktiv ist.
Hat jemand ein ähnliches Problem mit iOS-Tastaturen und dynamischen unteren Leinwänden gehabt? Für Vorschläge oder Problemumgehungen wäre ich sehr dankbar!
mein Code

Code: Select all

v-for="(modal, index) in modalStore.modals"
:key="index"
:class="['offcanvas', 'offcanvas-bottom', { show: modal.isOpen }]"
data-bs-backdrop="false"
tabindex="-1"
aria-labelledby="offcanvasBottomLabel"
:style="{ height: modal.height }"
>









[i][/i]






v-if="modalStore.modals.length > 0"
class="offcanvas-backdrop fade show"
@click="handleBackdropClick"
>



import { useModalStore } from "../../../libs/store/modalStore";

export default {
setup() {
const modalStore = useModalStore();

const closeModal = (name) => {
modalStore.closeModal(name);
};

// Backdrop click handler
const handleBackdropClick = () => {
// Get the most recent modal (top-most on the stack)
const currentModal = modalStore.modals[modalStore.modals.length - 1];

// Close the modal if `closeOverlay` is not explicitly false
if (currentModal.props.closeOverlay !== false) {
closeModal(currentModal.name);
}
};

return {
modalStore,
closeModal,
handleBackdropClick,
};
},
};

Ich habe versucht, dies zum Skript hinzuzufügen, aber es hat immer noch nicht funktioniert

Code: Select all

    const adjustModalForIOSKeyboard = () => {
const modalElement = document.querySelector(".offcanvas-bottom");

if (!modalElement) return;

const onKeyboardShow = (event) => {
// Get the keyboard height from the event (iOS provides it)
const keyboardHeight = event?.keyboardHeight || 300; // Fallback height

// Adjust modal height to avoid being blocked by the keyboard
modalElement.style.height = `calc(100vh - ${keyboardHeight}px)`;
};

const onKeyboardHide = () => {
// Reset modal height when the keyboard is hidden
modalElement.style.height = "100%";
};

// Listen to iOS-specific keyboard events
window.addEventListener("keyboardDidShow", onKeyboardShow);
window.addEventListener("keyboardDidHide", onKeyboardHide);

// Fallback for other platforms: focus events
document.body.addEventListener("focusin", onKeyboardShow); // Simulates `keyboardDidShow`
document.body.addEventListener("focusout", onKeyboardHide); // Simulates `keyboardDidHide`
};

onMounted(() => {
adjustModalForIOSKeyboard();
});

onUnmounted(() =>  {
// Cleanup event listeners
window.removeEventListener("keyboardDidShow", adjustModalForIOSKeyboard);
window.removeEventListener("keyboardDidHide", adjustModalForIOSKeyboard);
});