基于input实现一个验证码输入框组件，支持PC/H5环境使用，H5环境使用时支持唤起数字键盘。
效果截图
已发布至npm仓库：github.com/jaijia-bao/…
实现比较简单，有两点可以提一下：
用一个input还是多个input？
简单调研了下，发现有两种实现思路：一个input或者多个input。
多个input的思路是自动切换前后输入框的focus状态，但是不管逻辑复杂度还是交互体验都不太友好，最终没有采用此方案。
一个input的实现比较简单，视觉上隐藏默认组件，然后手动画输入框，逻辑上关联focus/blur状态。
注意: input隐藏效果得用CSS用定位来实现
display/visibility/opacity等属性实现隐藏效果时会导致H5环境下键盘弹不起来
.input-box-wrap {
position: absolute;
left: -9999px;
}
<div className="input-box-wrap">
<input />
</div>
用CSS实现focus态插入符闪烁效果
实现类似原生input输入框focus时插入符闪烁效果(caret)，网上有找到信息说用透明度实现，但呈现出来出来会有一个颜色的过渡效果；重新调研下可以用animation.steps实现，又遇到了颜色损失的问题-比如红色不够红。
枚举尝试了多次后可以用以下代码实现：
.item-content-active::before {
//...
animation: rc-captcha-input-flash steps(2) 1s infinite;
}
@keyframes rc-captcha-input-flash {
0% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
参考文章
