一次性密码组件——一种视觉错觉？
一次性密码组件——一种视觉错觉？
R 最近我一直在构建一个网站的登录/注册部分，在某些时候，我必须实现一个 一次性密码 确认帐户创建的组件：类似于上面屏幕截图中的组件。
当我看到 UI 设计时，我首先想到的是：“好吧，我需要创建一个数组 <input/> 元素，然后添加一两百 JS 行来处理内部状态，允许用户输入/编辑代码并处理从剪贴板粘贴的值。
但后来我想到了这个问题： 为什么？
为什么我们要实现这样的设计，更重要的是： 我们在这里试图解决什么问题？
为什么我们需要有 6 个输入框并编写所有逻辑以使它们表现得就像它们只是一个输入框一样？
从功能上讲，我们需要做的就是允许用户输入 6 个字符的字符串，但我看到的大多数（如果不是全部）该组件的实现 新PM 基本上都遵循相同的模式：输入框数组和很多 JS 使它们无缝地协同工作。
感觉不对，有些东西我没有得到。
在我的脑海中花了一些时间处理这些问题后，我想出了以下解释： 这是一种视错觉！
这种设计模式的起源可能可以追溯到表格打印在纸上并且人们必须用手拿着笔手动填写表格的时代：
基本上无法控制表单填写过程（当时我们没有客户端验证），我们提出了图形解决方案，可以帮助用户以尽可能清晰和正确的方式提供数据，即在上面的屏幕截图中，我们有：
- 分隔每个字符的框
- 预先格式化的日期字段以阐明日期格式
在上面的示例中，很明显“出生日期”已被分解为 8 个框，以建议用户我们需要将日期放在 日/月/年 格式而不是 日/月/年。
它只是一种图形处理，旨在帮助用户正确填写表格。
这些天我们有电子表格，这些东西让我们可以完全控制填写过程。我们不再需要将信息拆分为其原子部分来帮助用户提供正确的数据……即使我们决定这样做，我们也可以在图形级别上做到这一点。
这 一次性密码组件 是（或应该）就是这样。从图形的角度来看，它看起来像一堆输入框，但从技术的角度来看，它应该被实现为一个。
将其构建为输入数组并不能解决任何问题：相反，它需要付出很多努力才能使其工作和维护。
是我今年“最差花费 200 行 JS”奖的候选人！
为了得到确认 一次性密码 可以是一个简单的文本框我看了一圈发现这两个大佬已经把它实现为一个简单的输入元素：
无论如何，让我们实现它
因此，如果我们迫切需要实现像本文开头看到的那样的设计，我们可以尝试添加一些 CSS 和几行 JS。
这是它的样子：
现场演示可在此处获得：
本质上，我们需要使用 等宽 我们组件中的字体，因为这样每个字符都有相同的宽度。这允许我们创建和定位一些 <span/> 在后台给出多个输入框的错觉。
代码相当简单，任何熟悉 CSS 和 JS 的人都应该可以轻松定制。
最后的话
我不得不写下来并与某人分享：是 一次性密码 是错觉还是我产生幻觉 ???
您的反馈将不胜感激！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
