检测浏览器对HTML5新input类型的支持
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
特别注意:
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类型的支持的更多相关文章
- 【HTML5】input类型
* email <input type="email" name="user_email" /> * url <input type=&quo ...
- 检测浏览器对HTML5和CSS3支持情况的利器——Modernizr
Modernizr是什么? Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库. 目前,通过检验浏览器对一系列测试的处理情况,Modernizr 可以检测18项 CSS3 ...
- 怎样让老浏览器兼容html5新标签
CSS样式设置默认样式: <style> article, aside, canvas, details, figcaption, figure, footer, header, hgro ...
- 使用 HTML5 input 类型提升移动端输入体验
在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...
- 使用 HTML5 input 类型提升移动端输入体验(键盘)
在最近的项目中,策划老是要求我们弹出各种类型的键盘,特别是在iOS下,例如输入帐号的时候,不应该支持输入中文,该输入纯数字的时候就应该谈数字键盘等.个人觉得这些都是我们平时开发很少意识到的,虽然有些刁 ...
- 使用 HTML5 input 类型提升移动端输入体验(转翻译)
在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...
- HTML5学习笔记之Input类型
Input类型——email email类型用于包含email地址的输入域,在输入地址时会自动验证email域的值 例:Email:<input type="email" n ...
- 浏览器对HTML5特性检測工具Modernizr
近期在做公司移动端运营的项目,需求中多处地方都会涉及动画. 相信非常多前端开发都会有这样的感触,对CSS3中的动画属性非常熟悉,可是因为对动画运动过程的理解不深入,经常仅仅能望而止步.CSS3中动画这 ...
- xampp搭建服务器环境、html5新的input类型
怎么让别人看见你写的 先把你的文档放入htdocs里面 再输入网址: http://你的IP地址/文件名 就ok了例如我的 HTML5中的input类型: <input>标签规定用户可输入 ...
随机推荐
- 2.UiSelector API 详细介绍
一.UiSelector类介绍 //通过各种属性与节点关系定位组件 简单实例: public void testDemo2() throws UiObjectNotFoundException{ Ui ...
- 教你破解MyEclipse到2016年【图文详解】
1.首先确定JDK以及环境变量没有问题.因为破解工具包里的run.bat是调用java命令执行jar包,如果环境变量没有配置好,那就运行不了了.2.解压破解包,双击[run.bat]打开破解界面: 3 ...
- HDU 3977 斐波那契循环节
这类型的题目其实没什么意思..知道怎么做后,就有固定套路了..而且感觉这东西要出的很难的话,有这种方法解常数会比较大吧..所以一般最多套一些比较简单的直接可以暴力求循环节的题目了.. /** @Dat ...
- 优美的代码:do...while(0)
1.背景 最近再看一个开源代码的时候,看到很多宏经常这么写的: #define XXX do{\ ...\ }) 一眼看到的时候就知道这一份代码执行一次,那么do...while还有什么意义呢?在查阅 ...
- linux中操作数据库的使用命令记录
1,mysql 查看数据库表编码格式: show create table widget; 修改数据库表编码格式: alter table widget default character set u ...
- elasticsearch创建索引
1.通过elasticsearch-head 创建 (1)登录localhost:9100 (2)点击复合查询 (3)输入内容 (4)勾选易读,点击验证是否是JSON格式 (5)点击提交请求,返回 { ...
- 关于Java泛型深入理解小总结
1.何为泛型 首先泛型的本质便是类型参数化,通俗的说就是用一个变量来表示类型,这个类型可以是String,Integer等等不确定,表明可接受的类型,原理类似如下代码 int pattern; //声 ...
- 【CodeForces】913 D. Too Easy Problems
[题目]D. Too Easy Problems [题意]给定n个问题和总时限T,每个问题给定时间ti和限制ai,当解决的问题数k<=ai时问题有效,求在时限T内选择一些问题解决的最大有效问题数 ...
- 20155117王震宇 2006-2007-2 《Java程序设计》第一周学习总结
20155117王震宇 2006-2007-2 <Java程序设计>第一周学习总结 教材学习内容总结 尽量简单的总结一下本周学习内容 尽量不要抄书,浪费时间 看懂就过,看不懂,学习有心得的 ...
- laravel前台html代码不显示
后天向前台传输变量,如果能取到变量数据,还有代码,但是不显示图片 可以把{{}}换成{!! !!}试试.