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

首先,停止使用alert进行调试!获取Firebug和FireQuery的副本并使用它们console.log().即使你正在使用alert(),你真的应该用它$("input[type='date']").length来找到if选择器返回的东西 - object [object]这里没有告诉你任何有用的东西.

检测支持的输入类型的一个更好的方法是简单地创建一个输入元素并循环遍历所有可用的不同输入类型,并检查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);

(是的,正如您所看到的,有一点需要注意 - outerHTMLFirefox不支持,因此我们需要一个简单的解决方法,来自此Stack Overflow问题).

编辑:从此页面找到一种测试本机表单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/

Answer 2

要求type属性不适用于所有Android股票浏览器.他们假装他们支持inputType ="date",但是他们没有提供日期输入的UI(例如日期选择器).

此功能检测对我有用:

   (function() {
        var el = document.createElement('input'),
            notADateValue = 'not-a-date';
        el.setAttribute('type','date');
        el.setAttribute('value', notADateValue);
        return el.value !== notADateValue;
    })();

诀窍是将非法值设置为日期字段.如果浏览器清理此输入,它还可以提供日期选择器.

Answer 3

type 属性不是“虚构的”元素，它的定义如下：

http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.4

...浏览器只“知道”那里定义的@type值（除非它们支持HTML5——它定义了一些新值，如“日期”、“电子邮件”等）

当您查询 type 属性时，某些浏览器会向您返回“文本”，因为如果浏览器不支持“日期”类型（或任何它不理解的类型），那么它会回退到默认值 - 即 type= “文本”

您是否想过在输入中添加一个类名（class =“date”），然后您可以只使用 $('.date').each() ，然后在该集合上进行检测