‹‹ 上一主题 | 下一主题 ››
发新话题
打印

HTML5 input 类型移动端区别

dujun

超级版主

Rank: 8Rank: 8

UID
7229 
帖子
10 
精华
0 
积分
20 
阅读权限
150 
在线时间
4 小时 
注册时间
2016-4-26 
最后登录
2017-5-20 
1# 大 中 小 发表于 2016-9-14 15:55  只看该作者

HTML5 input 类型移动端区别

使用 HTML5 input 类型提升移动端输入体验返回原文英文原文：Using HTML5 Input Types to Enhance The Mobile Browsing Experience
Browsing the web on mobile devices has become incredbily popular over the past few years. However the browsing experience on these devices can sometimes leave a lot to be desired. This is especially true when it comes to filling in forms. Luckily the HTML5 specification introduces a number of new input types that make it easier for users to fill in your web forms on mobile devices.
In a rather awesome move, mobile browser vendors picked up on the new HTML5 input types and are using them to display customized keyboard layouts that make it easier for users to enter data.
In this blog post you are going to learn about eight new input types that have been introduced in HTML5.

译者信息

在过去的几年里，在移动设备上浏览网页已变得难以置信的受欢迎。 但是这些设备上的浏览体验，有时遗留很多的有待改进。当涉及到填写表单时，这一点尤为明显。幸运的是，HTML5规范引入了许多新input类型，使得在移动设备上，用户更容易填写的你的网页表单。
这是一个相当棒的进展，移动浏览器厂商拿起新的HTML5 input类型，并使用它们来显示定制过的键盘布局，使用户更容易输入数据。
在本文中，你将学到8种已经在HTML5中引入的新input类型。
Note: The iOS screenshots in this post were taken using an iPhone 5 and Safari. The Android screenshots were taken using a virtual device running Android 4.1 and the stock web browser.
Email Inputs
iOS (left) and Android (right) Keyboards for Email Inputs
The email type prompts both the iOS and Android browsers to display slightly customized keyboards. Notice the presence of a shortened space bar and the addition of @ and period (.) keys in the bottom row of the iOS keyboard. On Android, the standard comma key that would appear to the left of the space bar has been replaced with an @ key.
<input type="email" name="email">

译者信息

注意: 本文中，iOS的屏幕截图使用iPhone5和Safari截取。 Android屏幕截图则是在虚拟设备上运行Android4.1和其备有的网页浏览器截取。
电子邮件input类型
IOS（左）和Android（右）的电子邮件input的键盘
email 类型，iOS和Android浏览器都显示了轻度定制过的键盘。注意缩短的空格键的存在和iOS键盘的最底一行加入了@ 和句号（.）键。 而在Android上，标准逗号键将出现在空格键的左边，已经被一个@键替换。
<input type="email" name="email">
URL Inputs

iOS Keyboard for URL Inputs
The url input type can be used to help users input web addresses. On iOS the whole space bar has been replaced with period (.) and forward-slash (/) keys as well as a special .com key.
My testing showed no changes to the Android keyboard.
<input type="url" name="url">

译者信息

URL input 类型

iOS的URL input键盘
url  input 类型可以用来帮助用户输入网址。在iOS上，所有的空格键已被替换成句号（.）键和正斜杠（/）键，以及一个特殊的.com键。
我的测试显示，Android键盘没有变化。
<input type="url" name="url">
Telephone Number Inputs

iOS (left) and Android (right) Keypads for Telephone Inputs
Using the tel input type prompts both iOS and Android to display a dialer keypad instead of the standard keyboard.
<input type="tel" name="tel">

译者信息

电话号码input类型

IOS（左）和Android（右）的电话input的键盘
使用 tel input 类型时，iOS和Android都是提示显示拨号键盘，而不是标准键盘。
<input type="tel" name="tel">
Number Inputs

iOS (left) and Android (right) Keyboards for Number Inputs
The number input type causes iOS to present a keyboard with numbers and punctuation. The Android browser will launch a keypad similar to the one displayed for telephone inputs.
<input type="number" name="number">

译者信息

数字input类型

IOS（左）和Android（右）的数字input的键盘
number
input 类型促使iOS显示数字和标点符号的键盘。Android浏览器将启动一个类似显示电话输入的键盘。
<input type="number" name="number">
Date Inputs

iOS Date Picker
There are also a number of input types available for dates and times. These can be really useful as they ensure that your data is provided in a standardized format.
On iOS the date input type will prompt a date picker to be displayed. Unfortunately the Android browser does not yet have support for any datetime input types.
<input type="date" name="date">

译者信息

日期input类型

iOS日期拾取器
对于日期和时间，也有许多input类型可用。由于他们保证了你的数据是以一个标准的格式提供，所以这些可以是非常有用的。
在iOS上的 date input 类型会提示显示一个日期选择器。不幸的是，Android浏览器还未支持任何datetime 的input类型。
<input type="date" name="date">
Time Inputs

iOS Time Picker
Using the time type will prompt iOS to display a simple picker for selecting hours and minutes.
<input type="time" name="time">Date and Time Inputs
iOS DateTime Picker
The datetime type will display a picker for selecting both a date and time.
Although there is no option for explicitly selecting a year, the picker will automatically add a year to your input based on the date and month that you select.
<input type="datetime" name="datetime">

译者信息

时间input类型

iOS时间拾取器
使用time类型时会提示iOS显示一个简单的拾取器来选择小时和分钟。
<input type="time" name="time">日期和时间input类型
iOS日期时间拾取器
使用datetime类型时将显示一个用于同时选择日期和时间的拾取器。
虽然没有显式的选择年的选项，但是拾取器会自动根据您选择的日期和月份将年添加到你的input。
<input type="datetime" name="datetime">
Month Inputs

iOS Month Picker
The month type will display a simplified version of the date picker.
The HTML specification also defines a week input type, however this does not seem to have been implemented in either of the browsers I tested.
<input type="month" name="month">

译者信息

月份input类型

iOS 月份拾取器

month 类型时将会显示日期选择器的简化版本。
HTML规范还定义了一个week的input类型，然而，在我测试过的浏览器上，这好像并没有实现。
<input type="month" name="month">


原文地址引用：http://www.oschina.net/translate ... sing-experience?cmp

TOP

‹‹ 上一主题 | 下一主题 ››
发新话题