微信小程序实现无光标验证码功能

一位小伙伴有一天突然的问我，微信小程序中的填写验证码的框框怎么去写，我说这个简单啊，6个输入框不就搞定了，他说他实在是不会，问我可不可以帮他写一个demo，我当时想的是这么简单的东西还用问？就回复有时间就帮你写好了。于是，我真的有时间，也真的写了demo，不过，这个看起来简单的案例并没有想象的那么简单。

上图的效果在他问问题之前我就想到了，起码静态页面我三下五除二的就写完了，可是在真正写逻辑交互的时候出现了很多的问题。尽管微信小程序的input有很多的功能，但是在真机调试的时候，最大的问题就是，切换input的时候，键盘一直在打开收回。我们都知道，在移动端输入验证码的时候，输入法是不会收回的，但是我们这里用了6个输入框，在失去focus的时候，键盘是自动收回的。为了解决这个问题，我重新思考了一下。

在上一个小节，我们遇到了一个史诗级的bug，就是输入法会在失去焦点的时候反复的弹出收回，非常恶心的bug。
那么现在我们只要考虑怎样才能不让输入法收回？
那就是input不失去焦点的时候。
但是我们为了美观，6位的验证码我们又要分成6个单独的输入框。
所以，我们索性就再在页面上写一个input，专门存储这段完整的验证码。
然后把它隐藏起来，再根据这个输入框中的内容，动态的渲染到上面6个输入框中。
按照这个结构，我们的代码是这个样子的~

效果图如上

这里就非常的简单了，我们只要给上面的所有的单个输入框一个点击事件，当点击时候，就让那个看不见的input一个焦点，然后我们输入的内容，都是放在这个看不见的input框中。我们上面的value就可以动态的通过我们输入的值，去渲染出来就可以了。
然后再做一个没有输入完全的时候，一个提示信息。