2011-11-04 9 views
10

Quiero comprobar si el navegador que está corriendo mi página de es capaz de manejar el 'html 5 marcador de posición'Modernizr solo por un vistazo rápido?

Sé que puedo añadir la siguiente comprobación javascript:

!Modernizr.input.placeholder 

pero ¿vale la pena importar una biblioteca solo por un cheque?

también, ¿cómo lo hace modernizr para mí (me refiero a cómo se implementa bajo la cubierta)?

Respuesta

10

Si desea comprobar si hay placeholder soporte, entonces todo lo que necesita hacer es;

var placeholderSupport = "placeholder" in document.createElement("input"); 

Y para responder a su otra pregunta; sin, no hay absolutamente ningún punto de incluir a toda la biblioteca Modernizr de 1 línea de JS (Modernizr es de 1000 líneas .... vaya usted a saber:)) *

* Sí, no minified, pero el concepto sigue siendo

+11

Un punto de aclaración, Modernizr proporciona la fuente no comprimida para fines de investigación y desarrollo. Modernizr no ofrece una versión minificada con todo lo que contiene. Se le recomienda crear una compilación personalizada. Por lo tanto, no es un oneliner vs 1000+ liner comparison. –

+9

Además, Modernizr es un repositorio de casos extremos. El soporte de prueba para el tipo de entrada = rango, por ejemplo, está plagado de peligros. Inventar pruebas personalizadas cada vez es una buena manera de terminar con algo tan frágil como un sniff UA.La gente lo ha hecho antes con las pruebas de entrada de formularios HTML5 y todos sus detectores "tan simples" ahora están rotos. Descargo de responsabilidad: escribo Modernizr, obviamente. : p –

+3

Para ser justos, después de gzip es una diferencia de 87 a 500 bytes :) –

3

It's open-source. Go read it.

Modernizr['input'] = (function(props) { 
    for (var i = 0, len = props.length; i < len; i++) { 
    attrs[ props[i] ] = !!(props[i] in inputElem); 
    } 
    return attrs; 
})(('autocomplete autofocus list placeholder max min ' + 
    'multiple pattern required step').split(' ')); 
+2

cierto que esta fuente es muy difícil de entender para las personas que no están familiarizadas con ese truco. – SLaks

+0

Uno podría rascarse la cabeza si no ha visto el modismo '!!' antes, pero es fácil entenderlo, que modernizr solo está revisando para ver si la propiedad existe y nada más. – mquander

+1

@mquander Ese código fuente me supera un poco. ¿Por qué los dos signos de exclamación ??? – Zo72

1

encontrado esto: http://davidwalsh.name/html5-placeholder

Código:

function hasPlaceholderSupport() { 
    var input = document.createElement('input'); 
    return ('placeholder' in input); 
} 

Hay también una solución alternativa, haciendo clic en el enlace

Cuestiones relacionadas