H5禁止手机自带键盘弹出

这个问题，确实困扰了我好久，但是今天解决了。在网上搜索答案，全都是用DIV模拟input框实现，没有一个真正解决这个问题的，现在我只需要一句代码就可以完完整整的解决这个问题。

先看下问题吧：

这个是我自制的一个日历，在没有选择日期前她是这个样子的，感觉还可以吧

但是好景不长，当我将手放进选择框选日期的时候，手机自带的键盘就弹出来了，完全盖住的页面，好心塞，有么有？

解决方案：

HTML代码

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

JS代码

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

接下来见证奇迹的时刻到了，手机自带的键盘，奇迹就不见了。
看下面效果图，6不6，你就说！什么div模拟input方法，你试试就知道………….我就只呵呵了……

H5禁止手机自带键盘弹出相关推荐

【vant ui 双向输入框禁止手机键盘弹出】
vant ui 双向输入框禁止手机键盘弹出 <van-field readOnly @focus="noBomBox" :formatter="formatterN ...
安卓手机键盘弹出导致h5页面错乱
安卓手机键盘弹出导致h5页面错乱特别是有表单的h5,点击input输入信息的时候提交的按钮.以及定位到下方的图片都会被挤上来. 解决方法如下: <div class="bg_img& ...
php手机网页弹出软键盘代码,Html5页面上如何禁止手机虚拟键盘弹出
工作中遇到如下需求,点击输入框弹出自定义弹窗,输入框是input标签: 但是在移动端,input会默认触发手机的虚拟键盘,如何阻止手机虚拟键盘弹起呢?目前我试过有两个方案,一个是给input添加rea ...
【JS篇】禁止手机默认键盘弹出
开发过程中由于业务需求,需要通过点击input弹出自定义弹层,但input获得焦点时,会默认弹出手机默认键盘,此时就需要屏蔽手机默认键盘的弹出,尝试过使用readonly属性,但使用该属性也会同时屏蔽 ...
（小技巧）h5 手机键盘弹出收起的处理
本文转载于思否社区专栏:随笔作者:hzzly 前言:前段时间也是应项目的需求开始了 h5 移动端的折腾之旅,在目前中台的基础上扩展了两个 ToC 移动端项目,下面就是在 h5 移动端表单页面键盘弹出 ...
移动端选择时间时禁止软键盘弹出
今天在做移动端时遇到了尴尬的问题选择时间时手机自带的软键盘将时间插件顶了上去很别扭因此在网上找了下我前端使的是element-ui 前端: <el-date-picker v-mod ...
js防止安卓手机软键盘弹出挤压页面导致变形的方法
h5防止安卓手机软键盘弹出挤压页面导致变形的方法输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢? 先看看问题: 1.原来是这样的: 2.在苹果手机里面是正常的: 3.到了 ...
解决Android软键盘弹出覆盖h5页面输入框问题 // 在ios系统中输入框软键盘消失后，页面不回弹的问题 // 解决苹果不回弹页面 // 微信环境打开
//解决Android软键盘弹出覆盖h5页面输入框问题 window.addEventListener('resize', () => {if (document.activeElement.t ...
Android 禁止键盘弹出关闭键盘禁用键盘禁用输入法关闭输入法
Android 禁止键盘弹出公司App的需求是:EditText接收扫码枪的输入,或者自定义的数字输入界面,不要弹出键盘: 而当EditText接收到扫码枪数据时,获取到焦点,就会弹出键盘, ...

H5禁止手机自带键盘弹出

先看下问题吧：

解决方案：

H5禁止手机自带键盘弹出相关推荐

最新文章

热门文章