ЧАСТЬ A:
Я знаю, что есть много вещей, которые говорят вам, поддерживает ли браузер определенный атрибут HTML5, например http://diveintohtml5.info/detect.html, но они не говорят вам, как получить тип от отдельных элементов и использовать эту информацию для инициализации ваших плагинов.
Итак, я попробовал:
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"
Никто не работал.
В конце концов я придумал это (это работает):
var inputAttr = $('<div>').append($(this).clone()).remove().html().toLowerCase();
alert(inputAttr);
// returns "<input min="-365" max="365" type="date">"
Спасибо: http://jquery-howto.blogspot.com/2009/02/how-to-get-full-html-string-including.html
Итак, мой первый вопрос: 1. Почему я не могу прочитать атрибут "type" в браузерах, которые не поддерживают html5? Вы можете составить любой другой атрибут и фиктивное значение и прочитать его. 2. Почему мое решение работает? Почему это имеет значение, если оно в DOM или нет?
ЧАСТЬ B:
Ниже приведен базовый пример того, что я использую для обнаружения:
<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>
Пример в реальном времени: http://joelcrawfordsmith.com/sandbox/html5-type-detection.html
И услуга/вопрос: Может ли кто-нибудь помочь мне отрезать немного жира в моем блоке ввода типа HTML5?
У меня есть функциональность вниз (добавляет резервные копии для IE6-IE8 и FF без добавления классов для init)
Существуют ли более эффективные методы для итерации по DOM для типов ввода тайны? И должен ли я использовать If If Else, или функцию, или случай в моем примере?
Спасибо всем,
Joel
