Maiuscole automatiche per dispositivi mobili

Paul Kinlan

Potrebbe sembrare la funzionalità meno interessante in circolazione, ma penso che sia importante perché a nessuno piace digitare su dispositivo mobile: lo detesti, lo detesto. In Chrome per Android (versioni precedenti a Chrome 43 - beta da aprile 2015), uno sviluppatore ha poco controllo su come il browser può aiutare l'utente a inserire del testo. Se stai digitando su un dispositivo oggi, potrebbe essere simile a quanto segue:

Tieni presente che tutto è in minuscolo, ad eccezione di alcuni valori che Android ha riconosciuto come nome.

Apple ha introdotto un attributo in HTMLInputElement e HTMLTextAreaElement denominato autocapitalize in iOS 5 e consente all'autore della pagina di suggerire in che modo il browser deve presentare la tastiera virtuale per consentire all'utente di ottimizzare l'inserimento di testo. Nella sua forma più semplice, puoi indicare che una casella di testo deve mettere automaticamente in maiuscolo la prima lettera di ogni nuova frase.

A partire da Chrome 43, Chrome supporterà l'attributo autocapitalize sia su HTMLInputElement sia su HTMLTextAreaElement, il che ti consentirà di controllare il comportamento di attivazione della modalità Maiuscole della tastiera virtuale e di allinearlo a Safari su iOS.

autocapitalize verrà applicato solo ai HTMLInputElement per i quali è impostato l'attributo type su: type="text", type="search", type="url", type="tel", type="email" o type="password". Il valore predefinito è non attivare la modalità di maiuscola automatica.

Ecco un semplice esempio che ti consente di applicare la modalità Maiuscole automatiche alle frasi in un'area di testo:

<textarea autocapitalize="sentences">

Quali valori può assumere la funzionalità di maiuscole automatiche?

La tabella seguente mostra i diversi stati in cui può trovarsi un elemento di input:

Stato Parole chiave
<input>
<input autocapitalize=off> 		Nessuna lettera maiuscola none [default]
off
<input autocapitalize=characters> Lettere maiuscole caratteri
<input autocapitalize=words> Utilizzo delle maiuscole per le parole parole
<input autocapitalize=sentences> Lettere maiuscole nelle frasi frasi

Per HTMLInputElement, il valore predefinito non valido è Sentences Capitalization (Maiuscole per le frasi) se il tipo di elemento è type=text o type=search. In caso contrario, è No Capitalization (Nessuna maiuscola).

  • <input autocapitalize="simon"> è un campo di testo con Maiuscole frasi
  • <input type="email" autocapitalize="simon"> è un campo di testo con Nessuna maiuscola.
  • <input> è un campo di testo con Nessuna maiuscola.

Per HTMLTextAreaElement, il valore predefinito non valido è Maiuscole. Si tratta di una modifica rispetto al comportamento predefinito.

  • <textarea autocapitalize="terry"></textarea> è un'area di testo con l'opzione Maiuscole frasi attivata
  • <textarea></textarea> è un'area di testo con Lettere maiuscole all'inizio della frase.
  • <textarea autocapitalize="none"></textarea> è un'area di testo con Nessuna maiuscola.

Per HTMLFormElement abbiamo deciso di non implementare l'attributo, perché abbiamo riscontrato che al momento viene utilizzato raramente nelle pagine e, quando viene utilizzato, lo è principalmente per disattivare completamente la capitalizzazione automatica nel modulo:

<form autocapitalize=off><input></form>

Il codice riportato sopra è strano, in quanto lo stato predefinito per HTMLInputElement è Mai.

Perché preferisci utilizzare questo servizio rispetto a inputmode?

inputmode è pensato per risolvere, tra le altre cose, lo stesso tipo di problema. Tuttavia, mancano le implementazioni dei browser. Al meglio delle nostre conoscenze, solo Firefox OS ha un'implementazione ed è preceduto da un prefisso (x-inputmode), ma viene utilizzato molto poco sul web. D'altra parte,autocapitalize è già utilizzato su milioni di pagine su centinaia di migliaia di siti web.

Quando devo utilizzarlo?

Questo non è un elenco esaustivo dei casi in cui dovresti utilizzare autocapitalize. Tuttavia, esistono diversi casi in cui aiutare l'utente a inserire del testo è molto utile:

  • Utilizza autocapitalization=words se
    • Nomi di persone (nota: non tutti i nomi seguono questa regola, ma la maggior parte dei nomi occidentali verrà scritta automaticamente con la lettera iniziale maiuscola, come previsto)
    • Nomi delle aziende
    • Indirizzi
  • Utilizza autocapitalization=characters se prevedi:
    • Stati USA
    • Codici postali del Regno Unito
  • Utilizza sentences per gli elementi di input se prevedi contenuti inseriti in un normale paragrafo, ad esempio un post del blog.
  • Utilizza none in TextArea se prevedi contenuti che non devono essere interessati, ad esempio l'inserimento di codice.
  • Se non vuoi i suggerimenti, non aggiungere la funzionalità di maiuscolo automatico.