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

前言

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

真实场景再现:

解决方案:

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

相关推荐
北辰alk3 分钟前
Vue 中的 MVVM、MVC 和 MVP:现代前端架构模式深度解析
vue.js
北辰alk7 分钟前
为什么 Vue 中的 data 必须是一个函数?深度解析与实战指南
vue.js
北辰alk8 分钟前
Vue 的 <template> 标签:不仅仅是包裹容器
vue.js
Nan_Shu_61414 分钟前
学习: Threejs (2)
前端·javascript·学习
北辰alk17 分钟前
为什么不建议在 Vue 中同时使用 v-if 和 v-for?深度解析与最佳实践
vue.js
北辰alk19 分钟前
Vue 模板中保留 HTML 注释的完整指南
vue.js
G_G#22 分钟前
纯前端js插件实现同一浏览器控制只允许打开一个标签,处理session变更问题
前端·javascript·浏览器标签页通信·只允许一个标签页
北辰alk32 分钟前
Vue 组件 name 选项:不只是个名字那么简单
vue.js
北辰alk34 分钟前
Vue 计算属性与 data 属性同名:优雅的冲突还是潜在的陷阱?
vue.js
北辰alk34 分钟前
Vue 的 v-show 和 v-if:性能、场景与实战选择
vue.js