van-number-keyboard 在 iOS 中嵌入 H5 页面偶现无法唤起键盘
Author: sunxiaolin0903Created Jun 30, 2025Updated Jun 11, 2026
Labelsbug: need confirm
Reproduction Link
none
Vant Version
4
Describe the Bug
In iOS WebView environments (e.g. embedded H5 pages in apps like Telegram or WeChat), the <van-number-keyboard> sometimes does not show up when clicking the <van-password-input>.
When this happens:
- User taps the input area.
- Cursor appears inside
<van-password-input>, but the virtual keyboard (van-number-keyboard) is not shown. - If the user switches to another app (home button), then switches back — the keyboard will appear normally.
This issue seems to occur intermittently on real iOS devices only.
Example Code:
<van-password-input
class="password-input"
:value="codeValue"
:length="6"
:mask="false"
:gutter="12"
:focused="showKeyboard"
readonly
@touchstart.prevent="focusKeyboard"
/>
<van-number-keyboard
v-model="codeValue"
:maxlength="6"
:show="showKeyboard"
@blur="showKeyboard = false"
/>
### Reproduce Steps
1. 在 iOS App 的 WebView 中打开嵌入的 H5 页面。
2. 页面加载完成后,点击验证码输入框(van-password-input)。
3. 此时偶现不会弹出 van-number-keyboard 虚拟键盘。
4. 切换到后台(或切到别的 App),再切回来。
5. 再次点击输入框,此时键盘才会正常唤起
6. 视频文件见附件
https://github.com/user-attachments/assets/886a4b5e-24d5-4fc1-aa9d-240515d0f9a4
### Device / Browser
ios上Source: youzan/vant