本文介绍如何使用JavaScript实现类似支付宝的多方框密码输入效果，重点解决iOS设备上因频繁焦点切换导致的键盘闪动问题。通过隐藏真实输入框并动态同步视觉方框内容，优化用户体验，确保在Android和iOS平台上的平滑操作。
效果展示与初始方案分析
首先通过截图展示最终效果：用户在一个输入框中逐位输入密码，界面显示为多个独立的小方框，每个方框对应一位数字。
初始方案采用多个type为password的input元素，每输入一位自动跳转至下一个，删除时回退至前一个。该方案在Android设备上运行流畅且无bug，但在iOS设备上会导致键盘频繁弹出和收起，严重影响用户体验。原因是每个input元素的focus和blur事件交替触发，导致键盘状态不稳定，因此该方案不可行。
尽管产品经理坚持要求实现此类效果，但考虑到用户体验的重要性，必须寻找替代方案。作为前端开发人员，需克服技术限制以满足需求。
核心实现思路
针对频繁focus和blur引发的问题，核心思路是仅使用一个真实的input元素进行密码输入，而视觉上的多个小方框通过其他方式模拟生成。
以下是实现该效果所需的CSS样式代码。
CSS样式实现
.pwd-box{
width:310px;
padding-left: 1px;
position: relative;
border: 1px solid #9f9fa0;
border-radius: 3px;
}
.pwd-box input[type="tel"]{
width: 99%;
height: 45px;
color: transparent;
position: absolute;
top: 0;
left: 0;
border: none;
font-size: 18px;
opacity: 0;
z-index: 1;
letter-spacing: 35px;
}
.fake-box input{
width: 44px;
height: 48px;
border: none;
border-right: 1px solid #e5e5e5;
text-align: center;
font-size: 30px;
}
.fake-box input:nth-last-child(1){
border:none;
}
.pwd-box .pwd-input:focus{//密码框聚焦的时候需要改变其位置，否则IOS上会有闪动的光标~
left:-1000px;
top: -100px;
}
JavaScript逻辑与iOS兼容处理
var $input = $(".fake-box input");
$("#pwd-input").on("input", function() {
var pwd = $(this).val().trim();
for (var i = 0, len = pwd.length; i < len; i++) {
$input.eq("" + i + "").val(pwd[i]);
}
$input.each(function() {
var index = $(this).index();
if (index >= len) {
$(this).val("");
}
});
if (len == 6) {
self.sendPackage(pwd);//发送密码
}
});
核心逻辑是动态监听真实密码框的输入变化，并同步更新视觉方框中显示的密码内容。
实现过程的关键在于思路设计及兼容性问题处理。完成效果后，iOS设备上可能出现光标闪动问题，而Android设备无此现象。尝试通过设置text-indent、color为transparent等方法隐藏光标均无效。最终参考淘宝的解决方案：在input元素获取焦点时，将其移动至视口外（利用外层overflow: hidden隐藏），从而完美解决iOS上的光标闪动问题。
以上内容为本文的全部技术分享，旨在帮助开发者掌握JavaScript在复杂交互场景下的应用技巧。