项目：tar3 + vue3

问题：自定义密码或验证码输入框需要自动聚焦并键盘上拉

A.微信小程序：使用自定义指令实现此目的

自定义密码或验证码输入框

自动对焦的缺陷

B.支付宝小程序：官方文档表示不支持自动获取焦点，需手动启动

所以自定义指令在支付宝小程序&&ios中无效，需要通过其他方式。

选项一：

页面上还是有一个，覆盖住框然后隐藏，输入内容的时候，联想方式还是跟以前一样。

设置为：0；但iOS光标仍然

选项二：

基于解决方案 1，获取时，光标将移出可见窗口。不幸的是，iOS 光标仍然存在...

第三种解决方案：

根据解决方案 1，屏幕的宽度超过 1，因此光标位于可见窗口之外

光标如愿被隐藏了，新的问题又出现了，当键盘拉起来的时候，整个页面就掉下来了，如下图：

选项 4：

在方案三的基础上，设置右对齐，将光标隐藏到可见窗口的右侧，完美解决

<view class="base-input-nature-list f-c-c"> <view class="box-item f-c-c" v-for="(item, index) in max" :key="`box-item-${index}`" @tap="onClickBoxItem"> {{ type === 'pwd' ? inputList[index] : pwdList[index] }} </view> <input v-if="isAlipay && isIos" class="input-ios" type="number" :maxlength="max" :value="inputValue" @input="onInput($event)" /> </view> <view v-if="isAlipay && !isIos || isWeapp" class="base-input-nature-list-input"> <input v-focus="isFocus" type="number" :maxlength="max" :value="inputValue" @input="onInput($event)" @blur="onBlurInput" /> </view> .base-input-nature-list { position: relative; overflow: hidden; // other css } .input-ios { position: absolute; top: 0; left: 0; margin-right: -400px; width: 800px; color: #fff; background: transparent; text-indent: 20px; text-align: right; // 很重要 opacity: 0; }

其他逻辑见自定义密码或验证码输入框