微信小程序苹果手机自带的数字键盘老是弹出收起,影响用户体验,100%解决

发布于:2024-12-19 ⋅ 阅读:(12) ⋅ 点赞:(0)

1、index.wxml

<!--index.wxml-->
<view class="container">
  <view class="code-input-container">
    <view class="code-input-boxes">
      <!-- <block wx:for="{
   {codes}}" wx:for-index="index" wx:key="index">
        <input
          type="number"
          data-index="{
   {index}}"
          bindinput="onInput"
          maxlength="1"
          adjust-position="false"
          cursor-spacing="0"
          style="z-index: 1; width: 50px; height: 50px; text-align: center;"
          focus="{
   {focusIndex === index}}"
          disabled="true"
        />
      </block> -->
      <!-- <block wx:for="{
   {codes}}" wx:for-index="index" wx:key="index">
        <input
          type="number"
          data-index="{
   {index}}"
          maxlength="1"
          adjust-position="false"
          cursor-spacing="0"
          style="z-index: 1; width: 80rpx; height: 100rpx; text-align: center;"
          focus="{
   {focusIndex === index}}"
          value="{
   {codes[index]}}" 
          bindtap="onCodeTap" 
          bindinput="onInput" 
          placeholder=" " 
        />
      </block> -->
      <block wx:for="{
    {codes}}" wx:for-index="index" wx:key="index">
        <view
          class="code-input"
          data-index="{
    {index}}"
          bindtap="onCodeTap"
          style="width: 80rpx; height: 100rpx; text-align: center;"
          contenteditable="{
    {focusIndex === index}}"
        >
          {
  {codes[index] || ''}}
        </view>
      </block>
    </view>
    
    <!-- 自定义数字键盘 -->
    <view class='numModal'>
        <view>
          <view bindtap='clickNum' data-num='1'>1</view>
          <view bindtap='clickNum' data-num='2'>2</view>
          <view bindtap='clickNum' data-num='3'>3</view>
        </view>
        <view>
          <view bindtap='clickNum' data-num='4'>4</view>
          <view bindtap='clickNum'