明白了,对于苹果手机(iOS),即使使用了 bindtap
和 e.preventDefault()
来阻止默认行为,系统键盘仍然可能会弹出。这是因为 iOS 对输入框的处理方式与 Android 不同,尤其是在处理 input
元素时,iOS 会更加积极地弹出键盘。
解决方案
为了彻底防止 iOS 系统键盘弹出,我们可以采取以下几种方法:
-
使用
contenteditable="true"
替代input
:contenteditable="true"
是一种 HTML 属性,允许用户编辑元素的内容,但不会触发系统键盘。我们可以用它来替代input
,并通过 JavaScript 动态更新内容。
-
隐藏
input
元素:- 我们可以创建一个不可见的
input
元素,并将其display
设置为none
或visibility: hidden
,以防止系统键盘弹出。然后通过自定义的div
或view
来显示用户输入的内容。
- 我们可以创建一个不可见的
-
使用
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