Come sapere se il colore del tipo di input HTML5 è disponibile come selettore di colori?

Question

Vorrei aggiungere un fallback del selettore di colori jQuery se non viene mostrato alcun selettore di colori. Ad esempio, chrome mostra un selettore di colori, ma al momento, safari mostra semplicemente un campo di testo. Esiste un modo (senza agenti utente) per rilevare se è disponibile un selettore di colori?

Modifica: Modernizr non va bene, poiché si limiterebbe a dire che anche il safari lo supporta. Safari supporta il colore del tipo di input perché non consente nient'altro che un colore #hex da inserire nella casella di input. Ma non esiste un selettore di colori. Ho bisogno di sapere se c'è un selettore di colori, invece.

Answer 1

qui si va.

/** 
 
* Determine if the current browser has support for HTML5 input type of color. 
 
* @author Matthew Toledo 
 
* @return {boolean} True if color input type suppored. False if not. 
 
*/ 
 
var test = function() { 
 
    var colorInput; 
 

 
    // NOTE: 
 
    // 
 
    // If the browser is capable of displaying a color picker, it will sanitize the color value first. So "!"" becomes #000000; 
 
    // 
 
    // Taken directly from modernizr: 
 
    // @see http://modernizr.com/docs/#features-html5 
 
    // 
 
    // These types can enable native datepickers, colorpickers, URL validation, and so on. 
 
    // If a browser doesn’t support a given type, it will be rendered as a text field. Modernizr 
 
    // cannot detect that date inputs create a datepicker, the color input create a colorpicker, 
 
    // and so on—it will detect that the input values are sanitized based on the spec. In the 
 
    // case of WebKit, we have received confirmation that sanitization will not be added without 
 
    // the UI widgets being in place. 
 
    colorInput = $('<input type="color" value="!" />')[0]; 
 
    return colorInput.type === 'color' && colorInput.value !== '!'; 
 
}; 
 

 
$(function(){ 
 
    if (test()) { 
 
    $('body').append('<p1>Your browser supports the color input</p>'); 
 
    } else { 
 
    $('body').append('<p>Your browser Doesn\'t Support the color input</p>'); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Answer 2

È possibile rilevare le funzionalità HMTL5 utilizzando Modernizr.js e aggiungere anche fallback.

Ecco una breve introduzione sull'utilizzo di Modernizr.

http://html5doctor.com/using-modernizr-to-detect-html5-features-and-provide-fallbacks/

Answer 3

Per controllare il supporto di qualsiasi funzione di HTML3 o CSS3 su qualsiasi browser è possibile utilizzare Modernizr.

Il codice per la colorpicker sarà:

if(!Modernizr.inputtypes.color){ 
    // your fall back goes here 
} 

Per Modernizr tutto ciò che dovete fare è aggiungere un link del Modernizr sulla tua pagina web.

Esecuzione demo per lo stesso è possibile controllare a Nettuts:

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/

Spero che questo vi aiuterà.

Grazie, NS