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的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
Nov 05 HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
HTML5实现预览本地图片
Feb 17 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 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
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
javascript几个易错点记录
2014/11/26 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
python 排列组合之itertools
2013/03/20 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
使用Python生成XML的方法实例
2017/03/21 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
python调用百度语音REST API
2018/08/30 Python
NumPy中的维度Axis详解
2019/11/26 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
python3 简单实现组合设计模式
2020/07/02 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
货代行业个人求职简历的自我评价
2013/10/22 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
学前班学生评语
2014/12/29 职场文书
刑事案件上诉状
2015/05/23 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers