assets/index.js (4da55c4) - bibweb.git · git.schokokeks.org

Eingabefelder nur Scrollen wenn nötig

Bernd Wurst commited 4da55c4 at 2025-11-09 18:29:49

index.js

Blame History Raw

document.addEventListener('DOMContentLoaded', function() {
    // 1. Alle relevanten Eingabefelder im Formular auswählen
    // Wir verwenden 'input[type="text"]' und 'input[type="tel"]'
    const inputFields = document.querySelectorAll('input[type="text"]');

// 2. Event-Listener zu jedem Eingabefeld hinzufügen
    inputFields.forEach(input => {
        input.addEventListener('focus', function() {
            // Führen Sie einen leichten Timeout ein,
            // um dem Browser Zeit zu geben, die Tastatur einzublenden
            setTimeout(() => {
                // 3. Verwenden Sie scrollIntoView, um das Eingabefeld in den Blick zu bringen
                const rect = this.getBoundingClientRect();
                const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
                const spaceToBottom = viewportHeight - rect.bottom;
                if (spaceToBottom < 100) {
                    this.scrollIntoView({
                        behavior: 'smooth', // Sanfter Scroll-Effekt
                        block: 'start'      // Positioniert das Element am oberen Rand des Viewports
                    });
                }
            }, 300); // 300ms Verzögerung, kann je nach Gerät angepasst werden
        });
    });
});