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

项目:tar3 + vue3

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

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

方案一:

页面中还是一个input, 覆盖在box之上,然后隐藏input, 输入内容时,关联的方式还是和之前一样
在这里插入图片描述
设置input为 opacity: 0; 但是ios的光标依然在

方案二:

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

方案三:

在方案一的基础上,input的宽超过一屏,这样光标就在可视窗外
在这里插入图片描述
光标如期的隐藏了,显示出现了新的问题,拉起键盘时,页面整体掉下去了,如下:
在这里插入图片描述
方案四:
在方案三的基础上,input设置右对齐,这样把光标隐藏到可视窗的右侧,完美解决
在这里插入图片描述

<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;
}

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

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Misha韩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值