PARTE A:HTML5 Detección Tipo y Plugin de inicialización
Sé que hay un montón de cosas por ahí que le indican si un navegadorsoporta un determinado atributo de HTML 5, por ejemplo http://diveintohtml5.info/detect.html, pero don' Te digo cómo adquirir el tipo de elementos individuales y usar esa información para iniciar tus complementos.
así que he intentado:
alert($("input:date"));
//returns "[object Object]"
alert($("input[type='date']"));
//returns "[object Object]"
alert($("input").attr("type"));
//returns "text" ... which is a lie. it should have been "date"
Ninguno aquellos trabajó.
finalmente se me ocurrió esto (que funciona):
var inputAttr = $('<div>').append($(this).clone()).remove().html().toLowerCase();
alert(inputAttr);
// returns "<input min="-365" max="365" type="date">"
Gracias: http://jquery-howto.blogspot.com/2009/02/how-to-get-full-html-string-including.html
Así que mi primera pregunta: 1. ¿Por qué no puedo leer el atributo "tipo" en navegadores que no son compatibles con html5? Puedes inventar cualquier otro atributo y valor falso y leerlo. 2. ¿Por qué funciona mi solución? ¿Por qué importa si está en DOM o no?
PARTE B:
A continuación se muestra un ejemplo básico de lo que estoy utilizando el detector para:
<script type="text/javascript" >
$(function() {
var tM = document.createElement("input");
tM.setAttribute("type", "date");
if (tM.type == "text") {
alert("No date type support on a browser level. Start adding date, week, month, and time fallbacks");
// Thanks: http://diveintohtml5.ep.io/detect.html
$("input").each(function() {
// If we read the type attribute directly from the DOM (some browsers) will return unknown attributes as text (like the first detection). Making a clone allows me to read the input as a clone in a variable. I don't know why.
var inputAttr = $('<div>').append($(this).clone()).remove().html().toLowerCase();
alert(inputAttr);
if (inputAttr.indexOf("month") !== -1)
{
//get HTML5 attributes from element
var tMmindate = $(this).attr('min');
var tMmaxdate = $(this).attr('max');
//add datepicker with attributes support and no animation (so we can use -ms-filter gradients for ie)
$(this).datepick({
renderer: $.datepick.weekOfYearRenderer,
onShow: $.datepick.monthOnly,
minDate: tMmindate,
maxDate: tMmaxdate,
dateFormat: 'yyyy-mm',
showAnim: ''});
}
else
{
$(this).css('border', '5px solid red');
// test for more input types and apply init to them
}
});
}
});
</script>
ejemplo vivo: http://joelcrawfordsmith.com/sandbox/html5-type-detection.html
Y un favor/pregunta: Puede Alguien me ayuda a cortar un poco de grasa en mi fixer de tipo de entrada HTML5?
tengo la funcionalidad hacia abajo (fallbacks añade a IE6-IE8, FF y con la adición de clases a cabo a init fuera de)
¿Existen métodos más eficientes para la iteración en el DOM para los tipos de entrada de misterio? ¿Y debería usar un If Else, o una función, o un caso en mi ejemplo?
Gracias a todos,
Joel
¡Oh ciertamente! No pretendo sugerir que el atributo de tipo no sea real. Estaba preguntando por qué no puede devolver el valor de tipo de la misma manera que podría devolver un atributo inventado. –
Pensé en solo agregar la clase, pero quería tener una alternativa completa. –