html - Pin/密码输入(掩码)，字母间距/单词间距或多重输入的替代方案？

Question

对于一个小型的、移动优先的(网络)应用程序，我正在尝试创建一个 pin/密码输入(掩码)，例如:

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

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

多输入

• 无法在移动设备上检测退格键(在按下/按下键盘期间)；这使得导航到上一个输入字段时，当按下退格键并且该字段为空时，很难实现。
• 无法使用软键盘上的“双击切换”功能；将(通过用户操作/脚本)聚焦到下一个输入会产生一个“跳跃”键盘(无论哪种方式与“双击切换”自动大写打开或关闭相结合)

字母间距与背景重复线性梯度相结合(均已计算)

• 字母间距的实现与人们预期的有些不同，字符总是以“字母间距”结尾，而不是字符之间有空格。这会导致在到达输入字段的“末尾”时发生水平滚动
• 删除一个字符，移动整个字符串，而不是“清空”删除的字符

Word-spacing(在每个字符后附加一个空格)，背景为 repeating-linear-gradient(均已计算)

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

所以这个问题有点双重；首先，我可能错过了另一个解决方案(？)其次，对于提到的解决方案，列出的结果可以被“反驳”(？)

Answer 1

使用 JQuery 热键进行输入检测:

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

老实说，JQuery 及其模块似乎可以解决您的大部分问题。

我认为您也可以从这个答案中受益:CSS: Create iOS style Pin Password box