通过使用 contenteditable=“true“，我们彻底防止了 iOS 系统键盘的弹出

明白了，对于苹果手机（iOS），即使使用了 bindtap 和 e.preventDefault() 来阻止默认行为，系统键盘仍然可能会弹出。这是因为 iOS 对输入框的处理方式与 Android 不同，尤其是在处理 input 元素时，iOS 会更加积极地弹出键盘。

解决方案

为了彻底防止 iOS 系统键盘弹出，我们可以采取以下几种方法：

1. 使用 contenteditable="true" 替代 input：

   • contenteditable="true" 是一种 HTML 属性，允许用户编辑元素的内容，但不会触发系统键盘。我们可以用它来替代 input，并通过 JavaScript 动态更新内容。

2. 隐藏 input 元素：

   • 我们可以创建一个不可见的 input 元素，并将其 display 设置为 none 或 visibility: hidden，以防止系统键盘弹出。然后通过自定义的 div 或 view 来显示用户输入的内容。

3. 使用 readonly 并结合 blur 事件：

   • 虽然 readonly 会导致系统键盘弹出，但我们可以在用户点击输入框时立即调用 blur() 方法，强制取消焦点，从而防止键盘弹出。

推荐方案：使用 contenteditable="true"

这种方法不仅可以防止系统键盘弹出，还能确保用户能够看到输入的内容，并且代码结构相对简单。

修改后的代码

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">
        <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' data-num='5'>5</view>
          <view bindtap='clickNum' data-num='6'>6</view>
        </view>
        <view>
          <view bindtap