2KB项目,专业的源码交易网站 帮助 收藏 每日签到

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

  • 时间:2019-01-23 18:35 编辑:2KB 来源:2KB.COM 阅读:297
  • 扫一扫,手机访问
  • 分享
摘要:
HTML5 英文原文:Using HTML5 Input Types to Enhance The Mobile Browsing Experience

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

这是一个相当棒的进展,移动浏览器厂商拿起新的HTML5 input类型,并使用它们来显示定制过的键盘布局,使用户更容易输入数据。 

在本文中,你将学到8种已经在HTML5中引入的新input类型。

其它翻译版本 (1) 加载中

注意: 本文中,iOS的屏幕截图使用iPhone5和Safari截取。 Android屏幕截图则是在虚拟设备上运行Android4.1和其备有的网页浏览器截取。

电子邮件input类型

iOS (left) and Android (right) Keyboards for Email Inputs

IOS(左)和Android(右)的电子邮件input的键盘

email 类型,iOS和Android浏览器都显示了轻度定制过的键盘。注意缩短的空格键的存在和iOS键盘的最底一行加入了@ 和句号(.)键。 而在Android上,标准逗号键将出现在空格键的左边,已经被一个@键替换。

<input type="email" name="email">

URL input 类型

iOS Keyboard for URL Inputs

iOS的URL input键盘

url  input 类型可以用来帮助用户输入网址。在iOS上,所有的空格键已被替换成句号(.)键和正斜杠(/)键,以及一个特殊的.com键。 

我的测试显示,Android键盘没有变化。

<input type="url" name="url">

电话号码input类型

iOS (left) and Android (right) Keypads for Telephone Inputs

IOS(左)和Android(右)的电话input的键盘

使用 tel input 类型时,iOS和Android都是提示显示拨号键盘,而不是标准键盘。

<input type="tel" name="tel">

数字input类型

iOS (left) and Android (right) Keyboards for Number Inputs

IOS(左)和Android(右)的数字input的键盘 

number input 类型促使iOS显示数字和标点符号的键盘。Android浏览器将启动一个类似显示电话输入的键盘。

<input type="number" name="number">

日期input类型

iOS Date Picker

iOS日期拾取器

对于日期和时间,也有许多input类型可用。由于他们保证了你的数据是以一个标准的格式提供,所以这些可以是非常有用的。

在iOS上的 date input 类型会提示显示一个日期选择器。不幸的是,Android浏览器还未支持任何datetime 的input类型。

<input type="date" name="date">

时间input类型

iOS Time Picker

iOS时间拾取器

使用time类型时会提示iOS显示一个简单的拾取器来选择小时和分钟。

<input type="time" name="time">

日期和时间input类型

iOS DateTime Picker

iOS日期时间拾取器

使用datetime类型时将显示一个用于同时选择日期和时间的拾取器。

虽然没有显式的选择年的选项,但是拾取器会自动根据您选择的日期和月份将年添加到你的input。

<input type="datetime" name="datetime">

月份input类型

iOS Month Picker

iOS 月份拾取器

month 类型时将会显示日期选择器的简化版本。

HTML规范还定义了一个week的input类型,然而,在我测试过的浏览器上,这好像并没有实现。

<input type="month" name="month">

HTML5的input类型的浏览器兼容性

不支持这些新input类型的浏览器将只给用户显示一个简单的文本input。 这意味着,你可以继续前进,今天开始使用这些新的输入类型吧!

在桌面浏览器中,能支持日期/时间的input类型的浏览器仍非常有限。Opera浏览器目前有着最好的实现,支持本篇文章中所有提到的类型。谷歌的Chrome浏览器支持 date 类型,但现在没有其他东西。Safari浏览器有日期格式的文本字段,但不支持像Opera和Chrome上显示的那样的日历小组件。

最后的想法

幸运的是,曾经忍受一个差体验的浏览器的日子,在移动端已很快不再。利用HTML5引入的移动端友好的新特性的好处, 对我们所有的用户而言,都肯定能够享受愉快的体验,无论他们是使用哪种设备。

有用的链接

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。 2KB翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。


2KB项目(www.2kb.com,源码交易平台),提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务

  • 全部评论(0)
资讯详情页最新发布上方横幅
最新发布的资讯信息
【计算机/互联网|】Nginx出现502错误(2020-01-20 21:02)
【计算机/互联网|】网站运营全智能软手V0.1版发布(2020-01-20 12:16)
【计算机/互联网|】淘宝这是怎么了?(2020-01-19 19:15)
【行业动态|】谷歌关闭小米智能摄像头,因为窃听器显示了陌生人家中的照片(2020-01-15 09:42)
【行业动态|】据报道谷歌新闻终止了数字杂志,退还主动订阅(2020-01-15 09:39)
【行业动态|】康佳将OLED电视带到美国与LG和索尼竞争(2020-01-15 09:38)
【行业动态|】2020年最佳AV接收机(2020-01-15 09:35)
【行业动态|】2020年最佳流媒体设备:Roku,Apple TV,Firebar,Chromecast等(2020-01-15 09:31)
【行业动态|】CES 2020预览:更多的流媒体服务和订阅即将到来(2020-01-08 21:41)
【行业动态|】从埃隆·马斯克到杰夫·贝佐斯,这30位人物定义了2010年代(2020-01-01 15:14)
联系我们

Q Q: 7090832

电话:400-0011-990

邮箱:7090832@qq.com

时间:9:00-23:00

联系客服
商家入住 服务咨询 投拆建议 联系客服
0577-67068160
手机版

扫一扫进手机版
返回顶部