Fix tastiera che copre il campo di scrittura
Da Android 15 (API 35+) l'edge-to-edge e' forzato e adjustResize non ridimensiona piu' la finestra: la tastiera si limita a coprire la BlazorWebView. Con il layout rigido (html overflow:hidden, #app 100vh, page/main height:100% overflow:hidden) nemmeno il browser riesce a portare in vista il campo col focus. - MainActivity: WindowSoftInputMode AdjustResize|StateHidden e listener sugli WindowInsets che applica al content view il padding bottom pari all'inset IME (meno quello delle system bars, gia' coperto da SafeAreaEdges in MainPage), cosi' il 100vh si ricalcola. - main.js: su focusin e visualViewport resize porta il campo attivo al centro con scrollIntoView, necessario per i contenitori scrollabili. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -95,3 +95,38 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
}, 600);
|
||||
}
|
||||
})();
|
||||
|
||||
|
||||
// Tastiera: porta il campo attivo dentro l'area visibile.
|
||||
// Il layout e' a 100vh con overflow:hidden, quindi quando l'host riduce la
|
||||
// WebView per la tastiera il browser non scrolla da solo sul campo col focus.
|
||||
(function () {
|
||||
const SELECTOR = 'input, textarea, [contenteditable="true"]';
|
||||
let pending = null;
|
||||
|
||||
function scrollFocusedIntoView() {
|
||||
const el = document.activeElement;
|
||||
if (!el || !el.matches || !el.matches(SELECTOR)) return;
|
||||
el.scrollIntoView({block: 'center', behavior: 'smooth'});
|
||||
}
|
||||
|
||||
function schedule() {
|
||||
clearTimeout(pending);
|
||||
// attende la fine dell'animazione di apertura della tastiera e del relayout
|
||||
pending = setTimeout(scrollFocusedIntoView, 300);
|
||||
}
|
||||
|
||||
document.addEventListener('focusin', function (event) {
|
||||
if (event.target && event.target.matches && event.target.matches(SELECTOR)) {
|
||||
schedule();
|
||||
}
|
||||
});
|
||||
|
||||
// Il resize arriva quando la tastiera si apre/chiude o cambia altezza
|
||||
// (es. passaggio a tastiera emoji o suggerimenti).
|
||||
if (window.visualViewport) {
|
||||
window.visualViewport.addEventListener('resize', schedule);
|
||||
} else {
|
||||
window.addEventListener('resize', schedule);
|
||||
}
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user