Vue Vant 移动端如何禁止手机调起自带的输入键盘

前言

前不久在公司用Vue2开发了一个手机充值项目,键盘组件用的vant2NumberKeyboard 数字键盘组件;上线后在IOS端只有一个vant数字键盘组件,但到了Android端,输入框一获取焦点不仅vant数字键盘弹出,连手机自带的键盘也弹出来,这用户体验极差,也不美观。这个兼容性的bug处理后就整理分享一下,希望能帮助到遇到同问题的朋友。

真实场景再现:

解决方案:

给输入框加上readonly只读属性就OK了

相关推荐
kong790692841 分钟前
环境搭建-运行前端工程(vue)
前端·前端环境
谷歌开发者1 小时前
Web 开发指向标|开发者工具 AI 辅助功能的 5 大实践应用
前端·人工智能
晚烛6 小时前
实战前瞻:构建高可靠、强协同的 Flutter + OpenHarmony 智慧教育平台
javascript·flutter·html
快乐肚皮7 小时前
一文了解XSS攻击:分类、原理与全方位防御方案
java·前端·xss
保护我方头发丶7 小时前
ESP-wifi-蓝牙
前端·javascript·数据库
想学后端的前端工程师7 小时前
【Flutter跨平台开发实战指南:从零到上线-web技术栈】
前端·flutter
老王Bingo7 小时前
Qwen Code + Chrome DevTools MCP,让爬虫、数据采集、自动化测试效率提升 100 倍
前端·爬虫·chrome devtools
董世昌417 小时前
什么是扩展运算符?有什么使用场景?
开发语言·前端·javascript
Yaru118 小时前
Vue 3.6 预览版特性
javascript·vue.js
来杯三花豆奶8 小时前
Vue 3.0 Mixins 详解:从基础到迁移的全面指南
前端·javascript·vue.js