La tastiera dello smartphone copre il modulo o il pulsante Invia: come risolvere

Individuare il campo e la sequenza che fanno comparire il problema

Annota la pagina, il campo selezionato e le azioni precedenti. Un modulo nella pagina può funzionare mentre la stessa versione dentro una finestra presenta il difetto. Il primo campo può restare visibile e l’ultimo finire dietro la tastiera; un errore di compilazione può aggiungere spazio e cambiare nuovamente il risultato.

Registra una breve prova con dati fittizi, partendo da tastiera chiusa fino al punto in cui non riesci più a proseguire. Indica modello del telefono, versione del sistema, browser e modalità di apertura, compreso l’eventuale browser interno di un’app. Questi dati aiutano a ripetere la condizione senza attribuirla genericamente a “tutti gli iPhone”.

Prova separatamente tre azioni: portare in vista il campo, raggiungere il pulsante e chiudere la tastiera. Se una funziona e le altre no, conservalo nella segnalazione. Il tecnico deve conoscere il comportamento da correggere, non soltanto ricevere una fotografia della parte visibile.

Distinguere lo spazio della pagina da quello visibile sullo schermo

Il browser può gestire separatamente lo spazio usato per disporre la pagina e la porzione effettivamente visibile. MDN descrive questa distinzione attraverso VisualViewport: la tastiera sullo schermo può ridurre l’area visibile senza modificare allo stesso modo quella su cui è calcolato il layout. Per questo un elemento ancorato al fondo può finire in una posizione inattesa.

La diagnosi deve considerare le altezze imposte al modulo, i contenitori che lo racchiudono e le barre del browser. Chiedi al tecnico quali misure vengono usate e come cambiano quando il campo riceve il focus. Non basta sostituire una singola unità CSS e considerare risolti tutti i casi.

La documentazione del meta viewport descrive anche impostazioni per l’interazione con elementi come la tastiera. Supporto e comportamento vanno verificati sui browser del progetto. La scelta deve prevedere un risultato utilizzabile anche dove una funzione aggiuntiva non è disponibile.

Controllare barre fisse, pannelli e finestre del modulo

Elenca gli elementi che occupano spazio mentre scrivi: intestazione, pulsante di contatto, cookie banner, chat e barra di invio. Una barra utile a tastiera chiusa può sovrapporsi al modulo quando lo spazio si riduce. Prova la pagina con ciascun elemento nello stato in cui compare a un visitatore nuovo.

Il criterio W3C sul focus non completamente nascosto riguarda le coperture prodotte dai contenuti dell’autore. È un riferimento utile per controllare le barre create dal sito, da distinguere dalla tastiera appartenente al sistema operativo.

Rendere raggiungibili campo, errore e pulsante

Quando il modulo è dentro un pannello, verifica quale parte deve scorrere: la pagina, il pannello oppure il suo contenuto. Bloccare lo scorrimento dello sfondo può essere corretto durante una finestra aperta, ma serve un percorso che permetta comunque di raggiungere tutti i campi della finestra.

Controlla gli spostamenti automatici. Uno script che riporta continuamente il campo al centro può contrastare il gesto del visitatore o far saltare la pagina quando cambia la tastiera. Chiedi una gestione del focus che renda visibile ciò su cui si sta lavorando senza ricominciare lo scorrimento a ogni carattere.

Prova anche un errore vicino al fondo: il messaggio deve restare associato al campo e raggiungibile. Nascondere la tastiera dopo ogni errore o spostare il focus senza spiegazione può rendere la correzione più faticosa. Il pulsante di invio non deve essere necessariamente sempre fisso, purché si possa raggiungere in modo comprensibile e senza perdere i dati già compilati.

Scegliere tastiere adatte senza limitare i dati validi

Controlla se i campi suggeriscono una tastiera utile al dato richiesto. MDN descrive inputmode come un’indicazione sulla modalità di inserimento: non sostituisce la validazione. Un numero telefonico internazionale, per esempio, richiede di poter gestire il prefisso e non dovrebbe essere trattato come una quantità da incrementare.

Prova il cambio tra campi di testo, email e numero. L’altezza della tastiera o la riga dei suggerimenti può variare durante la stessa compilazione. Controlla anche il comando che permette di passare al campo successivo e quello che conclude l’inserimento, senza presumere etichette identiche su ogni telefono.

Non risolvere una sovrapposizione disabilitando l’ingrandimento della pagina. Un cliente può averne bisogno per leggere etichette e istruzioni. Mantieni invece testi leggibili, spazi coerenti e un layout capace di adattarsi, verificando anche la compilazione con il testo del dispositivo ingrandito.

Confrontare dispositivi e condizioni rappresentative

Prepara una matrice breve basata sui dispositivi utilizzati dal pubblico: almeno le combinazioni coinvolte nelle segnalazioni e quelle principali per il sito. Il simulatore del browser aiuta a controllare larghezze, ma una prova su telefono reale resta necessaria per osservare tastiera, zoom, barre e passaggio fra applicazioni.

Includi orientamento verticale e, quando il percorso lo consente, orizzontale; apertura della pagina dall’inizio e da un collegamento diretto al modulo; pannello aperto e modulo in pagina. Ripeti anche dopo aver chiuso e riaperto la tastiera. Se il problema compare soltanto in un browser interno, confrontalo con il browser principale mantenendo la stessa pagina.

Non serve collezionare schermate senza criterio. Per ogni prova registra un esito: campo leggibile, pulsante raggiungibile, dati conservati, errori correggibili. Le differenze devono guidare l’intervento e le verifiche successive, non diventare un elenco generico di dispositivi dichiarati compatibili.

Verificare la correzione fino all’invio riuscito

Dopo la modifica, compila tutti i campi con dati di prova, correggi un errore intenzionale e invia la richiesta. Controlla che il risultato arrivi al sistema previsto. La comparsa del pulsante non dimostra ancora che il percorso sia stato ripristinato interamente.

• Il campo attivo resta raggiungibile durante la scrittura.
• Il modulo può scorrere fino all’ultima istruzione.
• Barre e finestre non nascondono comandi essenziali.
• Chiudere la tastiera non azzera né sposta i dati.
• La conferma appare soltanto dopo l’esito previsto.

Conserva la sequenza come prova da ripetere dopo cambi a tema, banner o componenti del modulo. Se la compilazione rimane difficile anche senza sovrapposizioni, valuta separatamente numero dei campi e istruzioni con la guida all’abbandono dei moduli. Un intervento sullo spazio visibile risolve un ostacolo preciso; non rende automaticamente semplice tutto il processo.

Domande frequenti

Basta impostare l’altezza del modulo a 100dvh?

Non è una soluzione universale. Va verificato come il browser gestisce tastiera e area visibile, insieme ai contenitori, allo scorrimento e alle barre fisse. La correzione deve essere provata sui dispositivi interessati.

Perché dal computer, simulando lo smartphone, sembra funzionare?

Ridurre la larghezza non riproduce necessariamente tastiera del sistema, barre del browser, suggerimenti e zoom del telefono. La simulazione è utile, ma questo difetto richiede anche prove su dispositivi reali.

Conviene nascondere sempre la tastiera per mostrare Invia?

Non come rimedio automatico. Il cliente deve poter leggere, correggere e raggiungere i comandi durante la compilazione. Prima verifica layout, scorrimento e sovrapposizioni; poi scegli un comportamento coerente con il percorso.