首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >HTML5类型检测和插件初始化

HTML5类型检测和插件初始化
EN

Stack Overflow用户
提问于 2010-11-12 06:20:26
回答 8查看 4.7K关注 0票数 13

A部分:

我知道有很多东西可以告诉你浏览器是否支持某个HTML5属性,例如http://diveintohtml5.info/detect.html,但他们不会告诉你如何从单个元素获取类型并使用这些信息初始化你的插件。

所以我试着:

代码语言:javascript
运行
复制
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"

这些都不管用。

我最终想出了这个(这是可行的):

代码语言:javascript
运行
复制
var inputAttr = $('<div>').append($(this).clone()).remove().html().toLowerCase();
alert(inputAttr);
// returns "<input min="-365" max="365" type="date">"

谢谢:

所以我的第一个问题是: 1.为什么我不能在不支持html5的浏览器中读取“类型”属性?您可以编造任何其他属性和伪值并读取它。2.为什么我的解决方案有效?它是否在DOM中有什么关系呢?

B部分:

下面是我使用检测器的一个基本示例:

代码语言:javascript
运行
复制
  <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、函数或case吗?

谢谢大家,

乔尔

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4159838

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档