引脚/密码输入（掩码），字母间距/字间距或多输入的替代？

Question

对于小型的移动式第一（网络）应用程序，我尝试创建一个引脚/密码输入（掩码），例如：

+---+ +---+ +---+ +---+
| 1 | | 2 | | 3 | | 4 |
+---+ +---+ +---+ +---+

在各种解决方案的实施过程中，用户体验变得不可预测或令人困惑，我希望我能克服......下面的选项列出了我遇到的结果，demo: implementation of the three solutions (simplified)

多项投入

• 无法在移动设备上检测退格（在keydown / keyup期间）;这样，当按下退格键并且字段为空时，导航到上一个输入字段，很难实现。
• 无法使用＆＃39;双击班次＆＃39;软键盘上的功能;将（通过用户操作/脚本）聚焦到下一个输入会产生“跳跃”。键盘（两种方式结合＆＃39;双击班次＆＃39;自动开启或关闭）

字母间距与背景重复线性渐变（均已计算）

• 字母间距与人们预期的有些不同，字符总是以字母间距＆＃39;结尾，而不是在字符之间留有空格。当“结束”时，这会导致水平滚动。已达到输入字段
• 删除一个字符，移动整个字符串，而不是“清空”字符串。删除的角色

使用背景重复线性渐变（均已计算）的字间距（在每个字符后附加一个空格）

• 删除一个字符，移动整个字符串，而不是“清空”字符串。删除的角色

所以这个问题有点双重;首先，我可能错过了另一种解决方案（？）其次，对于提到的解决方案，列出的结果可以被反击＆＃39;（？）

Answer 1

使用JQuery Hotkeys进行输入检测：

https://github.com/jeresig/jquery.hotkeys

老实说，JQuery和它的模块似乎解决了你的大多数问题。

我想你也可以从这个答案中受益：CSS: Create iOS style Pin Password box