HTML5类型检测和插件初始化
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">"谢谢：
所以我的第一个问题是: 1.为什么我不能在不支持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添加了后备功能，但没有添加要初始化的类)
有没有更有效的方法来迭代神秘输入类型的DOM？在我的示例中，我应该使用If Else、函数或case吗？
谢谢大家，
乔尔
回答 8
Stack Overflow用户
发布于 2010-11-12 10:31:57
检测支持的输入类型的一种更好的方法是简单地创建一个输入元素，循环遍历所有可用的不同输入类型，并检查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);(是的，正如你所看到的，有一个警告-火狐不支持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%可靠--这只适用于对其值有一定限制的类型，而且肯定不是很好，但这是朝着正确方向迈出的一步，而且肯定会解决您的问题。
在此处查看更新的演示：
Stack Overflow用户
发布于 2013-10-09 22:14:32
询问type属性并不是在所有的Android浏览器中都有效。他们假装支持inputType="date"，但不提供UI (例如datepicker)。用于日期输入。
这个功能检测对我来说很有效：
(function() {
var el = document.createElement('input'),
notADateValue = 'not-a-date';
el.setAttribute('type','date');
el.setAttribute('value', notADateValue);
return el.value !== notADateValue;
})();诀窍是在日期字段中设置一个非法的值。如果浏览器清理了这个输入，它还可以提供一个日期选择器。
Stack Overflow用户
发布于 2010-11-12 08:53:22
type属性不是一个“虚构的”元素，它的定义如下：
http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.4
...and浏览器只“知道”这里定义的@Type值(除非它们知道日期--它已经定义了一些新值，如“HTML5”、"email“等)
当您查询类型属性时，一些浏览器会返回"text“给您，因为如果浏览器不支持"date”类型(或它不理解的任何内容)，那么它将恢复为默认值--即type="text“
您是否考虑过向输入添加一个类名(日期“class=”)，然后只需$('.date').each()，然后对该集合进行检测
https://stackoverflow.com/questions/4159838
复制相似问题
腾讯云开发者
