Maiuscole automatiche per dispositivi mobili

Potrebbe sembrare la funzionalità più insignificante mai realizzata, ma penso che sia importante perché a tutti non piace digitare da dispositivo mobile: tu lo detesti, lo detesti. In Chrome per Android (versioni precedenti a Chrome 43 - Beta a partire da aprile 2015) uno sviluppatore ha poco controllo sul modo in cui il browser può aiutare l'utente a inserire testo. Se stai digitando su un dispositivo, l'output potrebbe avere il seguente aspetto:

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

Apple ha introdotto su HTMLInputElement un attributo e HTMLTextAreaElement chiamato autocapitalize in iOS 5 e consente all'autore della pagina di suggerire in che modo la tastiera deve presentare il testo virtuale all'utente. Nella sua forma più semplice, potresti indicare che una casella di testo deve automaticamente utilizzare la maiuscola per la prima lettera di ogni nuova frase.

A partire da Chrome 43, Chrome supporterà l'attributo autocapitalize su HTMLInputElement e HTMLTextAreaElement, che ti consentirà di controllare il comportamento di utilizzo delle maiuscole automatiche della tastiera virtuale e di integrarla in Safari su iOS.

autocapitalize si applica solo ai HTMLInputElement che hanno l'attributo type impostato su type="text", type="search", type="url", type="tel", type="email" o type="password". L'impostazione predefinita è non utilizzare le lettere maiuscole automatiche.

Ecco un semplice esempio che ti consente di utilizzare la maiuscola per le frasi in un'area di testo:

<textarea autocapitalize="sentences">

Quali valori può assumere la maiuscola automatica?

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 nessuno [predefinito]
off
<input autocapitalize=characters> Maiuscole dei caratteri caratteri
<input autocapitalize=words> Lettere maiuscole parole
<input autocapitalize=sentences> Lettere maiuscole frasi

Per HTMLInputElement, il valore predefinito non valido è Maiuscole nelle frasi se il tipo di elemento è type=text o type=search. Altrimenti, è Senza lettere maiuscole.

  • <input autocapitalize="simon"> è un campo di testo con Uso delle lettere maiuscole nelle frasi
  • <input type="email" autocapitalize="simon"> è un campo di testo con senza lettere maiuscole.
  • <input> è un campo di testo con senza lettere maiuscole.

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

  • <textarea autocapitalize="terry"></textarea> corrisponde a un'area di testo con Uso delle lettere maiuscole nelle frasi
  • <textarea></textarea> corrisponde a un'area di testo con Maiuscole nella frase.
  • <textarea autocapitalize="none"></textarea> è un'area di testo con senza lettere maiuscole.

Per HTMLFormElement abbiamo deciso di non implementare l'attributo perché abbiamo scoperto che viene usato raramente nelle pagine al giorno d'oggi e, quando viene usato, viene usato principalmente per disattivare del tutto l'uso delle lettere maiuscole automatiche nel modulo:

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

Quanto riportato sopra è dispari, in quanto lo stato predefinito di HTMLInputElement è Nessuna maiuscola.

Perché lo utilizzi più di inputmode?

inputmode ha lo scopo di risolvere, tra le altre cose, lo stesso tipo di problemi. Tuttavia, manca l'implementazione del browser, per quanto ci risulta, solo il sistema operativo Firefox ha un'implementazione ed è preceduto da un prefisso (x-inputmode), ma ha anche un utilizzo ridotto sul web. D'altro canto, autocapitalize è già utilizzato in milioni di pagine su centinaia di migliaia di siti web.

Quando devo utilizzarla?

Non si tratta di un elenco esaustivo dei casi in cui è consigliabile utilizzare autocapitalize; tuttavia, esistono vari modi in cui aiutare l'utente a inserire il testo è molto utile:

  • Utilizza autocapitalization=words se:
    • In attesa di nomi di persone (nota: non tutti i nomi seguono questa regola, ma la maggior parte dei nomi occidentali sarà in maiuscolo automaticamente come previsto)
    • Nomi delle aziende
    • Indirizzi
  • Utilizza autocapitalization=characters se prevedi che:
    • Stati USA
    • Codici postali del Regno Unito
  • Utilizza sentences per gli elementi di input se prevedi contenuti che verranno inseriti sotto forma di paragrafo normale, ad esempio un post di un blog.
  • Utilizza none in TextAreas se prevedi contenuti che non dovrebbero essere interessati, ad esempio l'inserimento del codice.
  • Se non desideri fornire suggerimenti, non aggiungere lettere maiuscole automatiche.