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 相关文章推荐
CSS3中HSL和HSLA的简单使用示例
Jul 14 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 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 Rename 更改文件、文件夹名称
2011/05/24 PHP
php session的锁和并发
2016/01/22 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
python切换hosts文件代码示例
2013/12/31 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
python3注册全局热键的实现
2020/03/22 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
教师旷工检讨书
2014/01/18 职场文书
汽车队司机先进事迹材料
2014/02/01 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
党员理论学习心得体会
2016/01/21 职场文书
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS