パート A:
http://diveintohtml5.info/detect.htmlのように、ブラウザーが特定の HTML5 属性をサポートしているかどうかを教えてくれるものがたくさんあることは知っていますが、個々の属性から型を取得する方法は教えてくれません。要素を作成し、その情報を使用してプラグインを初期化します。
だから私は試しました：
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-include.html
私の最初の質問: 1. html5 をサポートしていないブラウザーで「type」属性を読み取れないのはなぜですか? 他の属性と偽の値を作成して読み取ることができます。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を初期化します）
ミステリー入力タイプの DOM を反復処理するためのより効率的な方法はありますか? 私の例では、If Else、関数、またはケースを使用する必要がありますか?
皆さんありがとう、
ジョエル