Come rilevare se un controllo di input HTML5 è supportato?

Question

Se metto un controllo <input type="range"> su un modulo, alcuni browser renderanno (correttamente) il controllo di un cursore e altri non sapranno cosa sia range e renderanno una casella di testo. La gestione di questo caso richiederebbe una convalida aggiuntiva, in quanto una casella di testo può contenere qualsiasi testo arbitrario. C'è qualche JavaScript che posso inserire nella pagina per dire "guarda questo controllo nel DOM, e se si tratta di un controllo da casella di testo, fai foo()"?

Answer 1

Questo site recommends using Modernizer:

Controllo per i tipi di ingresso HTML5 utilizza il rilevamento tecnica # 4. Innanzitutto, crei un elemento fittizio <input> nella memoria. Il tipo di input predefinito per tutti gli elementi <input> è "testo". Questo si rivelerà di vitale importanza.

var i = document.createElement("input"); 

Successivamente, impostare l'attributo type sull'elemento dummy sul tipo di input che si desidera rilevare.

i.setAttribute("type", "color"); 

Se il browser supporta quel particolare tipo di input, la proprietà type manterrà il valore impostato. Se il tuo browser non supporta quel particolare tipo di input, ignorerà il valore impostato e la proprietà type sarà ancora "text".

return i.type !== "text"; 

invece di scrivere 13 funzioni separate da soli, è possibile utilizzare Modernizr per rilevare il supporto per tutti i nuovi tipi di input definiti in HTML5. Modernizr riutilizza un singolo elemento <input> per rilevare in modo efficiente il supporto per tutti i 13 tipi di input. Quindi crea un hash chiamato Modernizr.inputtypes, che contiene 13 chiavi (gli attributi di tipo HTML5) e 13 valori booleani (true se supportato, false se non).

//check for native date picker 
if (!Modernizr.inputtypes.date) { 
    // no native support for <input type="date"> :(
    // maybe build one yourself with Dojo or jQueryUI 
}