Vue如何实现验证码输入与识别的交互流程？

本文共计1570个文字，预计阅读时间需要7分钟。

最近做了一个H5页面，里面有输入验证码交互，就是那种移动端比较常见的验证码输入交互。就是那种，对，就是那种，一个数字一个下划线，移动端不太常见的那种验证码交互。

最近做一个H5的页面，里面有个输入验证码交互，就是移动端比较常见的那种验证码输入交互。就是那种，对，就是那种，一个数字一个下划线，移动端非常常见的那种验证码交互。实现过程中主要参考了美团外卖安卓端的具体交互。

应用到项目中的效果如下。

一般操作：

粘贴效果：

方案选择

方案1：调整文字的间距
设置 input 的 letter-spacing 属性，我们就可以让验证码之间有足够大的空隙，然后再把底线改为有间隔的多个线段貌似就可以了。

然而，这里会有一个问题。就是光标总是会在数字的左边，而我们希望的是输入后的数字的中心位于原来光标的位置。最终我放弃了这个方案。

显然，这个方案并不合适。

方案2：使用多个 input
这就是我使用的方式，也是接下来我要详细讲解的方案。主要原理是：使用多个 input 元素，每个 input 只能输入一个数字。当通过 input 事件监测到字符输入时，自动将焦点对焦到下一个 input 元素。