大佬教程收集整理的这篇文章主要介绍了使用 HTML5 input 类型提升移动端输入体验，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
原文链接：http://www.oschina.net/translate/using-html5-input-types-to-enhance-the-mobile-browsing-experience
在过去的几年里，在移动设备上浏览网页已变得难以置信的受欢迎。 但是这些设备上的浏览体验，有时遗留很多的有待改进。当涉及到填写表单时，这一点尤为明显。幸运的是，HTML5规范引入了许多新input类型，使得在移动设备上，用户更容易填写的你的网页表单。
这是一个相当棒的进展，移动浏览器厂商拿起新的HTML5 input类型，并使用它们来显示定制过的键盘布局，使用户更容易输入数据。
在本文中，你将学到8种已经在HTML5中引入的新input类型。
注意: 本文中，iOS的屏幕截图使用iPhone5和Safari截取。 Android屏幕截图则是在虚拟设备上运行Android4.1和其备有的网页浏览器截取。
电子邮件input类型
IOS（左）和Android（右）的电子邮件input的键盘
email 类型，iOS和Android浏览器都显示了轻度定制过的键盘。注意缩短的空格键的存在和iOS键盘的最底一行加入了@ 和句号（.）键。 而@R_607_5313@d上，标准逗号键将出现在空格键的左边，已经被一个@键替换。
email 类型，iOS和Android浏览器都显示了轻度定制过的键盘。注意缩短的空格键的存在和iOS键盘的最底一行加入了@ 和句号（.）键。 而@R_607_5313@d上，标准逗号键将出现在空格键的左边，已经被一个@键替换。
<input type="email" NAME="email">
email 类型，iOS和Android浏览器都显示了轻度定制过的键盘。注意缩短的空格键的存在和iOS键盘的最底一行加入了@ 和句号（.）键。 而@R_607_5313@d上，标准逗号键将出现在空格键的左边，已经被一个@键替换。
iOS的URL input键盘
url input 类型可以用来帮助用户输入网址。在iOS上，所有的空格键已被替换成句号（.）键和正斜杠（/）键，以及一个特殊的.com键。
<input type="url" NAME="url">
email 类型，iOS和Android浏览器都显示了轻度定制过的键盘。注意缩短的空格键的存在和iOS键盘的最底一行加入了@ 和句号（.）键。 而@R_607_5313@d上，标准逗号键将出现在空格键的左边，已经被一个@键替换。
IOS（左）和Android（右）的电话input的键盘
使用 tel input 类型时，iOS和Android都是提示显示拨号键盘，而不是标准键盘。
<input type="tel" NAME="tel">
email 类型，iOS和Android浏览器都显示了轻度定制过的键盘。注意缩短的空格键的存在和iOS键盘的最底一行加入了@ 和句号（.）键。 而@R_607_5313@d上，标准逗号键将出现在空格键的左边，已经被一个@键替换。
IOS（左）和Android（右）的数字input的键盘
number input 类型促使iOS显示数字和标点符号的键盘。Android浏览器将启动一个类似显示电话输入的键盘。
<input type="number" NAME="number">
email 类型，iOS和Android浏览器都显示了轻度定制过的键盘。注意缩短的空格键的存在和iOS键盘的最底一行加入了@ 和句号（.）键。 而@R_607_5313@d上，标准逗号键将出现在空格键的左边，已经被一个@键替换。
iOS日期拾取器
对于日期和时间，也有许多input类型可用。由于他们保证了你的数据是以一个标准的格式提供，所以这些可以是非常有用的。
在iOS上的 date input 类型会提示显示一个日期选择器。不幸的是，Android浏览器还未支持任何datetiR_600_11845@e 的input类型。
<input type="date" NAME="date">
email 类型，iOS和Android浏览器都显示了轻度定制过的键盘。注意缩短的空格键的存在和iOS键盘的最底一行加入了@ 和句号（.）键。 而@R_607_5313@d上，标准逗号键将出现在空格键的左边，已经被一个@键替换。
iOS时间拾取器
使用time类型时会提示iOS显示一个简单的拾取器来选择小时和分钟。
<input type="time" NAME="time">
iOS日期时间拾取器
使用datetiR_600_11845@e类型时将显示一个用于同时选择日期和时间的拾取器。
虽然没有显式的选择年的选项，但是拾取器会自动根据您选择的日期和月份将年添加到你的input。
<input type="datetiR_600_11845@e" NAME="datetiR_600_11845@e">
email 类型，iOS和Android浏览器都显示了轻度定制过的键盘。注意缩短的空格键的存在和iOS键盘的最底一行加入了@ 和句号（.）键。 而@R_607_5313@d上，标准逗号键将出现在空格键的左边，已经被一个@键替换。
iOS 月份拾取器
@H_482_281@month 类型时将会显示日期选择器的简化版本。
HTML规范还定义了一个week的input类型，然而，在我测试过的浏览器上，这好像并没有实现。
<input type="month" NAME="month">
email 类型，iOS和Android浏览器都显示了轻度定制过的键盘。注意缩短的空格键的存在和iOS键盘的最底一行加入了@ 和句号（.）键。 而@R_607_5313@d上，标准逗号键将出现在空格键的左边，已经被一个@键替换。
不支持这些新input类型的浏览器将只给用户显示一个简单的文本input。 这意味着，你可以继续前进，今天开始使用这些新的输入类型吧！
在桌面浏览器中，能支持日期/时间的input类型的浏览器仍非常有限。Opera浏览器目前有着最好的实现，支持本篇文章中所有提到的类型。谷歌的Chrome浏览器支持 date 类型，但现在没有其他东西。Safari浏览器有日期格式的文本字段，但不支持像Opera和Chrome上显示的那样的日历小组件。
email 类型，iOS和Android浏览器都显示了轻度定制过的键盘。注意缩短的空格键的存在和iOS键盘的最底一行加入了@ 和句号（.）键。 而@R_607_5313@d上，标准逗号键将出现在空格键的左边，已经被一个@键替换。
幸运的是，曾经忍受一个差体验的浏览器的日子，在移动端已很快不再。利用HTML5引入的移动端友好的新特性的好处， 对我们所有的用户而言，都肯定能够享受愉快的体验，无论他们是使用哪种设备。
以上是大佬教程为你收集整理的使用 HTML5 input 类型提升移动端输入体验全部内容，希望文章能够帮你解决使用 HTML5 input 类型提升移动端输入体验所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。