微信移动端4位、6位、多位验证码密码输入框功能的实现代码，实现思路：

方案1：

写一个简单的input框。

评估：样式不好看，待定。

 

方案2：

就是用6个input框，每输入一个数字之后，切换到下一个input，即切换focus，删除的时候，同理。自测发现安卓机很流畅，但ios微信端并不是那么流畅，ios默认输入法输入也有点瑕疵。

评估：感叹一下万能的安卓，吐槽下wechat里ios版本更新慢，该方案可能要pass。

方案3：

用6个span标签。即放置一个输入框，隐藏其文字和位置，label>span*6。

评估：解决了绝大多数问题，很多公司都是类似的方案。

最终结果：

由于工程紧迫项目小，还考虑到一些其他外部原因，我们美丽的产品大人拍板了第一种方案。虽说兜兜转转又回到了圆点，但是大人给我的启发实实不可忽略。

 

下面是我开Vue工程，打的demo：

demo

 

 

下面是Vue工程demo代码：

 Vue组件代码：template内容：

 

 Vue组件代码：script内容：

 

 Vue组件代码：style[lang=less]内容：

 

Vue挂载标签<div id="app20190115"></div>样式：

 

Vue工程demo中的知识点：