HTML5新增加了很多input元素类型,比如color,date,datetime,datetime-local,email,month,number,range,search,tel,time,url,week等。

通过以下方法可以检测浏览器是否支持这些新的input类型:

var i = document.createElement('input');
i.setAttribute('type', 'date');
//浏览器不支持date类型
if(i.type == 'text'){
}

这里为新添加的input元素设置type特性(attribute)为date,如果浏览器支持date类型,则其对应的dom对象的type属性(property)会设置为date,否则会设置为text,这里一定要注意”特性(attribute)”和”属性(property)”的区别。attribute是标签的特性,而property是标签对应的DOM对象的属性。

所以,即使浏览器不支持新的input类型,虽然其DOM对象的type属性被设置为text,但其标签的type特性仍然是原来设置的值,对上面这个栗子来说就是date

i.getAttribute('type') == 'date'; //true

特别注意:

DOM对象属性(property)与HTML标签特性(attribute)

HTML中property与attribute是极易混淆的两个概念。大多数时候这两个单词都翻译为“属性”,为了区分二者,一般将property翻译为”属性”,attribute翻译为”特性”。

每一个HTML标签(tag)都对应一个DOM接口HTMLXxxElement,比如Span标签对应的是HTMLSpanElement。这些标签的DOM接口都继承自HTMLElement接口,而HTMLElement又继承自Element。我们知道所有的标签都是一个元素结点,因此Element接口又继承自Node接口。其实HTML文档树中的所有东西都是结点,只不过有不同的结点类型而已。

property就是DOM对象的属性,就像普通的javascript对象的属性一样一样的,因为DOM对象就是一个地道的javascript对象,也有自己的原型链。
而attribute则是HTML标签的特性,比如

<div id="div1" title="title1">test<div>

这里id和title是HTML标签div的特性,虽然对应的DOM对象HTMLDivElement也有这两个属性,但它们却是完全不一样的东西。有些特性与属性是同步的。

HTML标签的attribute以类数组的形式存储在对应DOM对象的属性attributes中,attributes属性的类型为NamedNodeMap对象。
DOM对象提供了方法setAttribute,getAttribute和removeAttribute来操纵HTML标签的特性。

DOMString  getAttribute(in DOMString name);
void    setAttribute(in DOMString name, in DOMString value) raises(DOMException);

HTML标签attribute的名字和值都必须为字符串类型,而DOM对象的property没有此限制,可以是任何类型。

有些HTML标签的attribute有对应的DOM对象property,但它们的取值却不一定是相同的。一般来说相对应的attribute与property其名字是一样的,但是class特性有所不同,因为class在javascript中为关键字,所以其所对应的property名字为className。

有些简单的特性,比如id,两者的取值是一样的。

var id1=elem.id;
var id2=elem.getAttribute('id');

但对于input的value,使用getAttribute获取的永远是写HTML标签时指定的那个值,而value属性则获取到的是input当前输入的值。
而另一些特性比如checked,只要checked特性存在,无论其值是什么,DOM对象的checked属性的值都是true。这里checked属性已经不是字符串而是布尔类型了。

还有一些特性比如style和onclick,其对应的DOM属性完全是返回一个对象了,比如elem.style属性就返回一个CSSStyleDeclaration对象。

HTML自定义attribute没有对应的DOM对象property。

检测浏览器对HTML5新input类型的支持的更多相关文章

  1. 【HTML5】input类型

    * email <input type="email" name="user_email" /> * url <input type=&quo ...

  2. 检测浏览器对HTML5和CSS3支持情况的利器——Modernizr

    Modernizr是什么? Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库. 目前,通过检验浏览器对一系列测试的处理情况,Modernizr 可以检测18项 CSS3 ...

  3. 怎样让老浏览器兼容html5新标签

    CSS样式设置默认样式: <style> article, aside, canvas, details, figcaption, figure, footer, header, hgro ...

  4. 使用 HTML5 input 类型提升移动端输入体验

    在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...

  5. 使用 HTML5 input 类型提升移动端输入体验(键盘)

    在最近的项目中,策划老是要求我们弹出各种类型的键盘,特别是在iOS下,例如输入帐号的时候,不应该支持输入中文,该输入纯数字的时候就应该谈数字键盘等.个人觉得这些都是我们平时开发很少意识到的,虽然有些刁 ...

  6. 使用 HTML5 input 类型提升移动端输入体验(转翻译)

    在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...

  7. HTML5学习笔记之Input类型

    Input类型——email email类型用于包含email地址的输入域,在输入地址时会自动验证email域的值 例:Email:<input type="email" n ...

  8. 浏览器对HTML5特性检測工具Modernizr

    近期在做公司移动端运营的项目,需求中多处地方都会涉及动画. 相信非常多前端开发都会有这样的感触,对CSS3中的动画属性非常熟悉,可是因为对动画运动过程的理解不深入,经常仅仅能望而止步.CSS3中动画这 ...

  9. xampp搭建服务器环境、html5新的input类型

    怎么让别人看见你写的 先把你的文档放入htdocs里面 再输入网址: http://你的IP地址/文件名 就ok了例如我的 HTML5中的input类型: <input>标签规定用户可输入 ...

随机推荐

  1. C/C++预处理宏的总结

    1.定义顺序的无关性 #define PI 3.14 #define TWO_PI  2*PI 这两句谁前谁后无所谓,因为预处理器不断迭代来实现宏替换,直到源文件中没有宏了才停止. 2. 宏变量变成字 ...

  2. CSS3方法总汇

    PS:CSS3的3D和我做研发时的3D不一样他们只能旋转180度  横为X竖为Z高为Y transfrom:2D3D转换 rotareX:绕着X轴旋转 rotareY(-180deg):绕着Y轴旋转- ...

  3. centos7 网络问题

    1虚拟机网卡设置--网卡设置模式为NET模式(正常情况是可以直接上网的)2“cd /etc/sysconfig/network-scripts/3使用命令“sudo vi ifcfg-ens33”进入 ...

  4. NOIP模拟3

    期望得分:30+90+100=220 实际得分:30+0+10=40 T1智障错误:n*m是n行m列,硬是做成了m行n列 T2智障错误:读入三个数写了两个%d T3智障错误:数值相同不代表是同一个数 ...

  5. atcoder #082 E 暴力 计算几何

    给出点集,然后求一个凸包的所有的子凸包的贡献总和,贡献计算是凸包内部含边界上点的数量N,凸包的不包含边界的顶点数S,贡献为$2^{N-S}$ 首先很容易想到,凸包上包含内部的所有点构成的子凸包有Sum ...

  6. arguments.length

    本文地址:http://www.cnblogs.com/veinyin/p/7607083.html  arguments.length是实参的个数,与形参个数无关.

  7. 记一次诡异的bug调试——————关于JDK1.7和JDK1.8中HashSet的hash(key)算法的区别

    现象: 测试提了一个bug,我完全复现不了,但是最吊诡的是在其他人的机器上都可以复现.起初以为是SVN合并后出现的冲突,后来经过对比法排查: step 1: 我本地开两个jetty,一个跑合并之前的版 ...

  8. javaScript操作数组的常用方法

    map(映射), reduce(规约), forEach(遍历), filter(过滤),它们都是高阶函数,都是以传入不同的函数来以不同的方式操作数组元.ie都不支持 判断是否为数组 Array.is ...

  9. AES,SHA1,DES,RSA,MD5区别

    AES:更快,兼容设备,安全级别高: SHA1:公钥后处理回传 DES:本地数据,安全级别低 RSA:非对称加密,有公钥和私钥 MD5:防篡改 相关: 公开密钥加密(英语:public-key cry ...

  10. C++中string.find()函数,string.find_first_of函数与string::npos

    查找字符串a是否包含子串b,不是用strA.find(strB) > 0而是strA.find(strB) != string:nposstring::size_type pos = strA. ...