jquery - HTML5 类型检测和插件初始化

Question

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、为什么在不支持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 没有添加类到 init 关闭)

对于神秘输入类型，是否有更有效的方法来遍历 DOM？我应该在示例中使用 If Else、函数还是案例？

谢谢大家，

乔尔

Answer 1

检测支持的输入类型的一种更高级的方法是简单地创建一个输入元素并循环遍历所有可用的不同输入类型，并检查 type 更改是否保持不变:

var supported = { date: false, number: false, time: false, month: false, week: false },
    tester = document.createElement('input');

for (var i in supported){
    try {
        tester.type = i;
        if (tester.type === i){
            supported[i] = true;
        }
    } catch (e) {
        // IE raises an exception if you try to set the type to 
        // an invalid value, so we just swallow the error
    }
}

这实际上利用了这样一个事实，即不支持该特定输入类型的浏览器将退回到使用文本，从而允许您测试它们是否受支持。

然后您可以使用 supported['week']，例如，检查 week 输入类型的可用性，并通过它进行回退。在这里查看一个简单的演示:http://www.jsfiddle.net/yijiang/r5Wsa/2/ .您也可以考虑使用 Modernizr用于更强大的 HTML5 功能检测。

---

最后，不管你信不信，获得 outerHTML 的更好方法是使用 outerHTML。而不是

var inputAttr = $('<div>').append($(this).clone()).remove().html().toLowerCase();

为什么不直接使用:

var inputAttr = this.outerHTML || new XMLSerializer().serializeToString(this);

(是的，如您所见，有一个警告 - Firefox 不支持 outerHTML，因此我们需要一个简单的解决方法，来自 this Stack Overflow question)。

---

编辑: 从该页面找到了一种测试原生表单 UI 支持的方法:http://miketaylr.com/code/html5-forms-ui-support.html .以某种方式支持这些类型的 UI 的浏览器应该也防止将无效值输入到这些字段中，因此我们在上面进行的测试的逻辑扩展是这样的:

var supported = {date: false, number: false, time: false, month: false, week: false},
    tester = document.createElement('input');

for(var i in supported){
    tester.type = i;
    tester.value = ':(';

    if(tester.type === i && tester.value === ''){
        supported[i] = true;
    }
}

同样，并非 100% 可靠 - 这仅适用于对其值有​​一定限制的类型，而且绝对不是很好，但这是朝着正确方向迈出的一步，现在肯定会解决您的问题。

在此处查看更新的演示:http://www.jsfiddle.net/yijiang/r5Wsa/3/