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

前言

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

真实场景再现:

解决方案:

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

相关推荐
鸡吃丸子12 分钟前
常见的实时通信技术(轮询、sse、websocket、webhooks)
前端·websocket·状态模式
胡斌附体39 分钟前
vue添加loading后修复页面渲染问题
前端·javascript·vue.js·渲染·v-if·异步加载
Dontla1 小时前
Webpack DefinePlugin插件介绍(允许在编译时创建JS全局常量,常量可以在源代码中直接使用)JS环境变量
运维·javascript·webpack
酷爱码2 小时前
css中的 vertical-align与line-height作用详解
前端·css
高建伟-joe2 小时前
内容安全:使用开源框架Caffe实现上传图片进行敏感内容识别
人工智能·python·深度学习·flask·开源·html5·caffe
沐土Arvin2 小时前
深入理解 requestIdleCallback:浏览器空闲时段的性能优化利器
开发语言·前端·javascript·设计模式·html
专注VB编程开发20年2 小时前
VB.NET关于接口实现与简化设计的分析,封装其他类
java·前端·数据库
小妖6662 小时前
css 中 content: “\e6d0“ 怎么变成图标的?
前端·css
L耀早睡3 小时前
mapreduce打包运行
大数据·前端·spark·mapreduce
咖啡の猫3 小时前
JavaScript基础-创建对象的三种方式
开发语言·javascript·ecmascript