lena和shane,家庭日志,xulavigne,Lena&Shane

如何实现

HTML5 input标签新增type特性

2015-11-04 Shane Jhu

HTML5 拥有多个新的表单输入类型,这些新特性提供了更好的输入控制和验证。

在可以弹出虚拟键盘的设备上会自动启用键盘的特殊样式,个别type,如 Date pickers 中的类型,在手机中可以调用系统的日期选择控件。

本章全面介绍这些新的输入类型以及使用效果:


以下是在 Nexus 5/Android 5.1.1/CM12 自带默认浏览器和谷歌中文输入法下的效果,其他浏览器和输入法中效果稍有不同。


◆email:


(type="email")

在下图中可以看到,弹出的键盘左下角默认的 "," 变成了 "@"。

Screenshot_2015-11-04-17-51-23.png


◆url:


(type="url")

点击文本框弹出的键盘中左下角默认的 "," 变成 "/",有些输入法还会有可以直接输入"www" 或 ".com" 的按钮。

Screenshot_2015-11-04-17-51-36.png


◆number:


(type="number")

直接弹出数字键盘,只能输入数值。

Screenshot_2015-11-04-17-52-00.png


◆range:


(type="range")

这个区间选择,在 IE 11 和 Microsoft Edge 中是这样的:

image.png

在手机浏览器中是这样的,但是太小了,也许还需要用CSS修饰一下:

Screenshot_2015-11-04-17-52-19.png


◆Date pickers (date, month, week, time, datetime, datetime-local):


(type="date")

在 Microsoft Edge 下是这样的: 

image.png

在手机默认浏览器下是这样的:

Screenshot_2015-11-04-17-52-29.png

在微信内置浏览器中是这样的:

Screenshot_2015-11-04-17-58-43.png

UC浏览器中是这样的:

Screenshot_2015-11-04-20-30-36.png


◆search:


(type="search")

在下图中可以看到,弹出的键盘右下角默认的 "回车" 变成了 "搜索"。

Screenshot_2015-11-04-17-52-39.png


◆color:


(type="color")

一些浏览器中的文本框会变成色块,点击后可以弹出颜色选择界面。

Screenshot_2015-11-04-20-34-46.png

点“更多”:

Screenshot_2015-11-04-20-34-35.png

微信内置浏览器中(我想说这什么鬼,怎么点。。。):

Screenshot_2015-11-04-17-59-15.png

UC浏览器中:

Screenshot_2015-11-04-17-59-40.png


HTML5 中INPUT会直接调用相应的浏览器特性,无疑会为开发者降低一定工作量,但不同浏览器中的显示效果和支持情况都不相同,目前数据的录入还是要考虑多种情况,不能太过依赖。

本文由lenashane.com原创,转载请注明出处:查看原文

如果觉得文章还不错,请点个赞吧

8月 30 2020
太过信任,你或许会受骗,然而终日怀疑,你会饱受痛苦。

弗兰克•克莱恩 (Frank Crane 美国演员,导演)