移动端验证码/密码输入框实现--安卓/ios适用

最新推荐文章于 2025-07-10 09:53:10 发布

向阳的小老鼠

最新推荐文章于 2025-07-10 09:53:10 发布

阅读量3.9k

点赞数 11

CC 4.0 BY-SA版权

文章标签：移动端密码验证码输入框兼容安卓/IOS

本文链接：https://blog.youkuaiyun.com/m0_37097272/article/details/94761312

本文介绍了在移动端实现验证码和密码输入框的两种方法，包括6个input切换聚焦和1个input+6个span的方式。针对iOS和Android平台的兼容性问题，如iOS上的卡顿、输入删除操作及调起键盘等进行了详细讨论，并提供了相关HTML、CSS和JS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先贴图，需要实现的效果是这样的。

6个输入框

实现思路有两个：

1、用6个input，输入一个数字后将focus给下一个输入框。

2、用一个input和6个span，input隐藏，用span显示。

现在大部分都是使用的第二种方法。（当然，如果你能说服产品也可以只用一个普通的input输入框，就什么都不用考虑了）

两种方案遇到的坑，以及优缺点，如下：

方案一：6个input。

主要就是用js切换focus，在安卓是相当流畅的，但是在ios会严重卡顿，简直逼死强迫症。

HTML：

<div class="divYZM">
    <!-- onpropertychange是为了避免在ios中oninput方法不被触发 -->
    <input id="check_1" class="numDiv" type="number" oninput="inputNext(check_1)" onpropertychange="inputNext(check_1)"/>
    <input id="check_2" class="numDiv" type="number" oninput="inputNext(check_2)" onpropertychange="inputNext(check_2)"/>
    <input id="check_3" class="numDiv" type="number" oninput="inputNext(check_3)" onpropertychange="inputNext(check_3)"/>
    <input id="check_4" class="numDiv" type="number" oninput="inputNext(check_4)" onpropertychange="inputNext(check_4)"/>
    <input id="check_5" class="numDiv" type="number" oninput="inputNext(check_5)" onpropertychange="inputNext(check_5)"/>
    <input id="check_6" class="numDiv" type="number" oninput="inputNext(check_6)" onpropertychange="inputNext(check_6)"/>
&l