Controlliamo il supporto dei nuovi input type HTML5 nei Browser

Oltre ai classici <input type=”text”> o <input type=”password”> sono stati introdotti numerosi tipi di campi per i form

  • <input type=”search“> per i campi di ricerca
  • <input type=”number“> per i numeri
  • <input type=”range“> per gli slider
  • <input type=”color“> per i color picker (selettori di colore)
  • <input type=”tel“> per i numeri telefonici
  • <input type=”url“> per gli indirizzi web
  • <input type=”email“> per gli indirizzi e-mail
  • <input type=”date“> per i selettori delle date di calendario
  • <input type=”month“> per i mesi
  • <input type=”week“> per le settimane
  • <input type=”time“> per la marca temporale
  • <input type=”datetime“> per una marca temporale precisa
  • <input type=”datetime-local”> per la marca temporale locale

Li vedremo più nel dettaglio in un successivo post, nel frattempo come verificare se il browser dell’utente li riconosce?

A) Tecnica 4: creare un elemento per ogni input

Se il browser ignora gli attributi creati per quell’elemento, lo sostituiamo con un normale input di tipo “text”

var i = document.createElement("input");
i.setAttribute("type", "color");
return i.type !== "text";

B) Per evitare di creare una funzione per ogni input type, usare Modernizr

Qualunque input type controlleremo, Modernizr effettua il check anche sugli altri

if (!Modernizr.inputtypes.date) {
// nnessun supporto nativo per <input type="date">
}

Questo articolo è tradotto liberamente dallo spettacolare DiveIntoHTML5

Annunci

Cosa ne pensi? Lascia un Commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...