taro 兼容支付宝小程序和微信小程序<六>-- 自定义密码或验证码输入框组件的input 自动获取焦点(ios支付宝小程序怎么隐藏input的光标)

项目:tar3 + vue3

问题: 自定义密码或验证码输入框需要自动聚焦,拉起键盘
A. 微信小程序: 用了自定义指令达到这个目的
自定义密码或验证码输入框
input自动获取焦点之坑

B. 支付宝小程序:官方文档中说不支持自动获取焦点,必须手动拉起
在这里插入图片描述
所以自定义指令在支付宝小程序&&ios下是无效的,需要另辟蹊径。

方案一:

页面中还是一个input, 覆盖在box之上,然后隐藏input, 输入内容时,关联的方式还是和之前一样
taro 兼容支付宝小程序和微信小程序<六>-- 自定义密码或验证码输入框组件的input 自动获取焦点(ios支付宝小程序怎么隐藏input的光标)_第1张图片
设置input为 opacity: 0; 但是ios的光标依然在

方案二:

在方案一的基础上,input获取focus时,onfocus时将input移出可视窗,悲催的是ios的光标依然依然存在…

方案三:

在方案一的基础上,input的宽超过一屏,这样光标就在可视窗外
taro 兼容支付宝小程序和微信小程序<六>-- 自定义密码或验证码输入框组件的input 自动获取焦点(ios支付宝小程序怎么隐藏input的光标)_第2张图片
光标如期的隐藏了,显示出现了新的问题,拉起键盘时,页面整体掉下去了,如下:
taro 兼容支付宝小程序和微信小程序<六>-- 自定义密码或验证码输入框组件的input 自动获取焦点(ios支付宝小程序怎么隐藏input的光标)_第3张图片
方案四:
在方案三的基础上,input设置右对齐,这样把光标隐藏到可视窗的右侧,完美解决
taro 兼容支付宝小程序和微信小程序<六>-- 自定义密码或验证码输入框组件的input 自动获取焦点(ios支付宝小程序怎么隐藏input的光标)_第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;
}

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

你可能感兴趣的:(小程序,#,Taro,微信小程序,支付宝小程序,input自动获取焦点)