如何使用js进行前端开发？

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

目录+前言+思路+遇到的问题+HTML+CSS+JS+前言+验证码输入框+常见需求+不知各位小伙伴在遇到这种情况时是选择找一个插件还是自己动手做一个呢？我花了点时间动手做了一个。

目录

• 前言
• 思路
• 遇到的问题
• HTML
• CSS
• JS

前言

验证码输入框应该是很常见的需求吧，不知道各位小伙伴在在遇到的时候是选择找一找插件还是自己动手撸一个呢？我花了点时间撸了一个出来，实际体验还不错，分享给大家。

思路

我在实现之前肯定也是上网搜了一下的，网上的方式大多是使用多个input标签来实现，但我觉得不太优雅，就自己想了一个方法。使用了6个div标签和一个input标签。验证码长度一般是4位或6位，我这里用6位做演示。

• 先将6个div使用flex布局平铺。
• 再将input使用绝对定位覆盖在6个div上面。
• 监听input元素的input、focus、blur事件，对用户的输入进行处理。

遇到的问题

上述布局在pc端是ok的，但是在移动端会有问题，移动端的光标底部会有个控件，你能够拖动调整光标位置。