场景描述

公司定制了一批刮刮卡，当做商品销售；收到刮刮卡后在官网和移动端上输入16位的卡号，验证后即可兑换卡内对应的商品。

16位卡号生成时去掉了0o、il等比较容易混淆的字母数字，不区分大小写，4个一组中间空格，保证卡号清晰易读。

输入卡号的操作是网页端和移动端都要用的，其中移动端是 WebApp 的形式，不是NativeApp 。

初步解决方案

1、给出四个输入框，用户把四组数字输入进去

问题： 每个小输入框没有限制字数，意思是用户可以在第一个输入框里输入16个乃至更多的字符 （这里我没有验证在第一个输入框内直接输入16位正确卡号是否可以通过校验，这个可能要根据前端是如何拿数据来判断）。

2、给出四个输入框，限制每个输入框只能输入四个字符

问题： WebApp 如果采用此方案，键盘会频繁呼出切换，非常麻烦；web端还可以忍受 。

这里web上有方法可以做到填完一个输入框，光标自动移到下一个输入框。所以这个方法还可以接受。不过 WebApp 上貌似没法实现这个效果 （据前端程序猿反馈）。

最佳解决方案

一个输入框内，输入卡号自动分隔成四组（当然如果你卡号是5组6组这只是程序上的小修改而已)。 因为只有一个输入框，这个可以解决web app上频繁切换键盘的问题；同时自动分隔，也是一种很好的提示，并且与卡号印刷时候的方式统一。

现成的代码实现，web & WebApp 都可以用→ 《 single field credit card input pattern 》