一个文本框搞定信用卡相关信息的输入[转]

http://beforweb.com/node/134

?

输入框当中的最左端是一个代表信用卡的图标，主要内容部分用于输入卡号，蒙板规则是典型的4位分隔。随着用户的输入，系统会根据卡号判断卡片的类别，例如VISA或MasterCard，并相应的改变左侧的信用卡图标。这种方式帮用户省掉了一个选择卡片类型的步骤，而且是一种很积极的信息回馈方式，让用户能够感受到系统对他们的操作产生了响应(相关阅读：为用户的成功操作提供正面反馈)。

当用户正确的完成了16位卡号的填写，文本框会自动改变显示模式，之前输入的卡号只会显示出最后的4位，节省出的3个字段就分配给了有效期、CVV码和邮编。用户在键入这些内容的时候同样会得到输入蒙板的辅助，例如格式限定、日期有效性的判定、自动添加斜杠、自动聚焦到下一个字段等。

这里有一个很棒的细节，当用户在输入CVV码时，左侧的图标会发生变化(如上图所示)，提示用户所谓的CVV码就是卡片背后的3位数字；非常贴心。

目前看来人们对这套交互模式的反响很好；这简直是一定的。只用到一个文本框，即有效的利用了输入蒙板的防错与辅助功能，又极大减少了传统模式当中文本框的使用量——Squre给力！

另外值得一提的是，Zachary Forrest通过前端技术将这套交互模式“移植”到了Web端，有兴趣的朋友们也不妨去围观。

本文整合编译自两篇相关文章：Collecting Payment Information Within a Single Input和Making beautiful forms; Square and Recurly