Html5页面上如何禁止手机虚拟键盘弹出


Posted in HTML / CSS onMarch 19, 2020

工作中遇到如下需求,点击输入框弹出自定义弹窗,输入框是input标签:

Html5页面上如何禁止手机虚拟键盘弹出

但是在移动端,input会默认触发手机的虚拟键盘,如何阻止手机虚拟键盘弹起呢?目前我试过有两个方案,一个是给input添加readonly属性,另一个就是在input事件处理方法前面添加一句document.activeElement.blur() 。

readonly

使用readonly方式来阻止虚拟键盘弹出应该是最简单最优雅的方式了。readonly 属性规定输入字段为只读。只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本。

值得一提的是它的取值,只要声明了readonly属性,不管取什么值都可以,比如readonly=""、readonly="readonly"、readonly="abc"都是一样的

优点:简单
缺点:在iOS的Safari中无效(未做更多情况测试)

document.activeElement.blur()

这是个什么玩意儿?document.activeElement是一个Web API接口。MDN上的解释是:它返回当前页面中获得焦点的元素,也就是说,如果此时用户按下了键盘上某个键,会在该元素上触发键盘事件,该属性是只读的。

document.activeElement属性始终会引用DOM中当前获得了焦点的元素。元素获得焦点的方式有用户输入(通常是按Tab键)、在代码中调用focus()方法和页面加载。

它里面有很多方法,在浏览器控制台查看,可以看到有很都方法:

Html5页面上如何禁止手机虚拟键盘弹出

那么document.activeElement.blur()为什么可以阻止虚拟键盘弹出呢?原因是:当你点击input的时候,document.activeElement获得了DOM中被聚焦的元素,也就是你点击的input,而调用.blur()方法,blur我相信大家都知道吧,就是取消聚焦。获得被聚焦的元素然后强制blur以达到没有聚焦的样子、、、感觉绕了。

优点:支持Android、iOS
缺点:需要添加额外的JS代码

这句代码加在什么地方?加入有如下HTML

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

那么这句JS加在事件处理方法中

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

总结

就当前需求来说,用document.activeElement.blur()确实是在绕弯子,直接使用readonly是最佳方案。但是document.activeElement很强大,可以做很多事。

到此这篇关于Html5页面上如何禁止手机虚拟键盘弹出的文章就介绍到这了,更多相关Html5手机键盘弹出内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 HTML / CSS
详解CSS3中Media Queries的相关使用
Jul 17 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
HTML5图片预览实例分享
Jun 04 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
css height属性中的calc方法详解
Jun 03 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 #HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 #HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 #HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 #HTML / CSS
html5默认气泡修改的代码详解
Mar 13 #HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 #HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 #HTML / CSS
You might like
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
php的curl封装类用法实例
2014/11/07 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
jQuery中DOM操作实例分析
2015/01/23 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python快速查找算法应用实例
2014/09/26 Python
Python httplib模块使用实例
2015/04/11 Python
Python中优化NumPy包使用性能的教程
2015/04/23 Python
python取余运算符知识点详解
2019/06/27 Python
Django 大文件下载实现过程解析
2019/08/01 Python
Python 3 判断2个字典相同
2019/08/06 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
运动会开幕式主持词
2014/03/28 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python