如何阻止手机虚拟键盘弹起

问题出现：

最近在做一个微信公众号项目，里面使用到一个日历插件，但是在手机端，每次点击都会把手机自带的虚拟键盘调出来

解决方案

1，使用readonly

使用readonly方式来阻止虚拟键盘弹出应该是最简单的方式了。readonly 属性规定输入字段为只读。只读字段是不能修改的。
还有值得注意的是只要声明了readonly属性，不管取什么值都可以，比如readonly=”“、readonly=”readonly”、readonly=”aaa”等效果都是一样的。

优点：简单，易用
缺点：在iOS的Safari中无效

2,document.activeElement.blur()
document.activeElement返回的是页面当前获得焦点的元素，那么.blur()就是让这个元素失去焦点。一旦失去焦点，手机的虚拟键盘自然也就消失了。
示例代码：

html:

<div class="calendar"><div><input type="text" id="datePicker" placeholder="点击选择日期"/></div>
</div>

js:

$("#datePicker").focus(function(){document.activeElement.blur();
});

兼容性：此方法兼容Android、iOS

如何阻止手机虚拟键盘弹起相关推荐

解决移动端手机虚拟键盘弹起遮盖输入框
移动端H5页面虚拟键盘弹起,让Input自适应上升兼容微信和钉钉: 给input添加获取焦点事件: 将底部的输入框整体滚动: 注意:底部的输入框要用子绝对父相对 focusFn(a){let ele ...
php手机网页弹出软键盘代码,Html5页面上如何禁止手机虚拟键盘弹出
工作中遇到如下需求,点击输入框弹出自定义弹窗,输入框是input标签: 但是在移动端,input会默认触发手机的虚拟键盘,如何阻止手机虚拟键盘弹起呢?目前我试过有两个方案,一个是给input添加rea ...
html5 5s自动返回键,关于HTML5页面与手机虚拟键盘的回车的处理
要支持手机虚拟键盘的回车键能触发当前页面的提交效果,需要满足一下几点一,存在form元素以及submit类型的input子元素二,需要将form的onsubmit属性绑定包含返回布尔值的方法关于 ...
android键盘坏了怎么办,手机虚拟键盘失灵怎么办
现如今安卓只能手机普遍,也出现了各种各样的问题,其中就有手机虚拟键盘失灵.学习啦小编在这里给大家带来怎么解决虚拟键失灵这个问题的方法. 造成虚拟键不管用的五怕 1.怕静电:很容易击穿电容屏.虽然电容屏 ...
安卓手机软键盘弹起的问题
现如今很多API对于安卓系统,iOS系统有些会兼容,有些不兼容.就拿软键盘弹起的问题来说吧,如果一个系统上面有一个输入框,底部有个按钮(前提按钮用了position:fixed),当我用安卓手机点击输 ...
USB转蓝牙hid键鼠按键精灵控制手机虚拟键盘、虚拟触摸等功能
#USB转蓝牙hid键鼠按键精灵控制手机虚拟键盘.虚拟触摸等功能提示:目的是为了实现通过电脑控制,达到手机虚拟触摸的功能简单介绍提示:开放协议,可再行开发,提供C# python c++ 等开发 ...
H5页面手机输入框键盘弹起顶起背景图
问题 h5页面有背景图,手机输入框键盘弹起顶起背景图 HTML,下面是背景图的div <div class="bg"></div> JS $('.bg'). ...
手机软键盘弹起导致页面变形的一种解决方案
最近用 uniapp(一种第三方 app 开发框架) 开发 app,其中一个页面有十几个 input 输入框,在点击 input 输入时,软键盘弹起,导致页面往上顶,底部的按钮也全部弹到页面上面去了, ...
Unity3d游戏聊天匹配手机虚拟键盘
项目最近开发聊天系统,有这么一个需求:输入框根据键盘的高度来做适应,意思就是说,根据键盘的高度,动态改变游戏聊天视图的高度. 然后记录一下过程吧. 开发环境:Unity2019.4 , Fairygu ...
html手机输入框键盘弹起顶起背景图
问题:点击页面输入框,弹起的键盘把背景图顶起,再滑动页面有下方有空白. 解决方法: $('body').height($('body')[0].clientHeight);

如何阻止手机虚拟键盘弹起

问题出现：

解决方案

如何阻止手机虚拟键盘弹起相关推荐

最新文章

热门文章