html5支持的触摸键盘类型

可触摸键盘的类型

HTML5 所支持的根据不同的输入框类型而调出不同的触摸键盘的代码和案例

原文链接：http://baymard.com/labs/touch-keyboard-types

最近我们在做移动商务网站的可用性研究，发现很多站点对触摸键盘的表单字段没有进行更加增强用户体验的优化。

因此，我们决定将下面的“小抄”提供给web设计人员和开发人员，告诉他们怎样正确的设置合理的type以及什么时候使用autocorrect="off", autocapitalize="off"和novalidate.你通过移动设备访问这个页面就能看到案例的效果。

如果你想要更加详细的了解可用性测试观察，你可以访问我们已经发表的一篇杂志文章。如果你想在平板或者手机等移动设备上增强表单用户体验，这无疑是最简单的方法。

Code & Demos

更新于 八月13号, 2013

E-mail field

禁止输入框自动纠错以及自动调整大写的功能。调用特殊的@的键盘（即在该设置下@键会自动出现键盘中）。

demo:    

code:    

Phone field

调用特殊的手机号输入键盘（提示：ios中在手机号键盘模式下不允许输入特殊字符，如括号和破折号。所以你不需要担心因为特殊字符问题而去格式化手机号码）。

demo：

code:    

Address line field

禁止自动纠正。

ZIP code field

设置输入类型为数字类型（提示：阿根廷、加拿大、荷兰和英国可以使用字母类型的邮政编码。为了避免这种这种情况，在输入邮编之前先根据选择的国家来动态改变邮编的输入类型）。

Credit card number field

数字键盘。

Quantity field

语义化的数字键盘。

Date field

日期键盘。（提示：或许你想要的是一个实际的日历选择器；你可以看看 Smashing Magazine 的关于移动商务设计的文章。）

Submit button

如果你想让键盘上的‘Go’按钮能起到提交表单作用的话，不要使用type=button。

触摸键盘的基本标准

We've also benchmarked the top 50 mobile commerce sites across the 5 touch keyboard guidelines described in the Smashing Magazine article, the results are as follows: (Show detailed breakdown)

#1: Disable auto-correct where the dictionary is weak

Is 'Address Line' auto-correct disabled?

8% adhere · 92% violate

#2: Show appropriate keyboard layout

Does email field have email keyboard, phone keyboard, and card numeric field?

40% adhere · 60% violate

#3: Consistently invoke keyboard layouts

Are both phone, credit card number, date and CVV code numeric?

46% adhere · 54% violate

#4: Honor the 'Next' and 'Previous' button behavior

Tab through form: is sequence right, is data persisted?

96% adhere · 4% violate

#5: Disable auto-capitalization where appropriate

Is auto-capticalization disabled on the email field?

62% adhere · 38% violate

Examples of Poor Implementations

At HP, 'str' is auto-(in)corrected to 'ate' because they haven't disabled auto-correction.

At Cabela's, the e-mail keyboard isn't invoked despite customized the placeholder text.

At Amazon, the credit card field doesn't invoke a numeric keyboard, increasing the likelihood of typing errors.

At Amazon, the phone keyboard isn't invoked, presenting a bunch of alphanumeric characters instead.

DisneyStore tab sequence 1/2: When tapping the 'Next' button the state field is skipped ...

DisneyStore tab sequence 2/2: ... and 'ZIP' gets focused instead; clearly not what the user expected.

Examples of Good Implementations

With auto-correction disabled, Nike allows the user to enter their address without 'dictionary intervention'.

Macy's makes it easier to quickly fill in your e-mail by invoking the e-mail keyboard layout with '@' and '.' keys.

By invoking a numeric keyboard for the credit card field, Walmart makes the 16-digit entry a breeze with large numeric keys.

Office Depot correctly invokes the phone keyboard for the phone fields (however, they shouldn't split the field).

While Walmart should make their ZIP code field shorter, invoking the numeric keyboard does indicate that a state prefix shouldn't be included.

By invoking a numeric keyboard for the 'Quantity' field, Walmart increases the size of each key by 471% (on iOS).