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 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 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
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
python调用windows api锁定计算机示例
2014/04/17 Python
Python正则表达式匹配HTML页面编码
2015/04/08 Python
python对json的相关操作实例详解
2017/01/04 Python
python实现简单http服务器功能
2018/09/17 Python
序列化Python对象的方法
2020/08/01 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
幼儿园健康教育方案
2014/06/14 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
python flask框架快速入门
2021/05/14 Python