如何制作隐藏光标的uniapp长尾词验证码输入框？

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

目录一. 前言二. 实现思路三. 代码实现四. 过程中遇到的问题一. 前言二. 实现思路三. 代码实现四. 过程中遇到的问题

目录

• 一. 前言
• 二. 实现思路
• 三. 代码实现
• 四. 过程中遇到的问题

一. 前言

先看下使用场景效果图：

1. 点击输入框唤起键盘，蓝框就相当于input的光标，验证码输入错误或者不符合格式要求会将字体以及边框改成红色提示，持续1s，然后清空数据，恢复原边框样式；
2. 5位验证码输入完毕，点击页面其他位置，隐藏键盘；这时如果发现验证码有误，再次点击输入框又唤起键盘，也能正常删除数字（这里其实做的时候遇到了bug，再次聚焦不能删除错误数字，下文会讲到）。

二. 实现思路

具体实现思路：

• 将input标签相对于父元素做绝对定位，与父元素左边距设置为负的本身宽度即可（position: absolute; top: 0; left：-100%; width: 100%; height: 100%;）。
• 动态去设置input的focus属性。
• input同级使用for循环去创建5个正方形的view标签。