web移动端禁止弹出默认键盘

- 日理万妓 2023-10-11 15:18 33阅读 0赞

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

--------------------

#### 先看下问题吧： ####

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

![这里写图片描述][20161028180500096]

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

![这里写图片描述][20161028180513222]

--------------------

#### 解决方案： ####

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方法，你试试就知道………….我就只呵呵了……

![这里写图片描述][20161028180526816]

[20161028180500096]: https://img-blog.csdn.net/20161028180500096
[20161028180513222]: https://img-blog.csdn.net/20161028180513222
[20161028180526816]: https://img-blog.csdn.net/20161028180526816

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关 web移动端禁止弹出默认键盘

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

- 日理万妓/ 2023年10月11日 15:18/ 0 赞/ 34 阅读

相关 js移动端监听软键盘弹出和收起事件

在苹果手机上，当软键盘收起时输入框会失去焦点；但是在安卓实际上，键盘收起时输入框并不一定会失去焦点，但是会引起window的高度变化因此，在安卓手机上可以通过window.

╰+攻爆jí腚メ/ 2023年08月17日 16:51/ 0 赞/ 124 阅读

相关 JS_H5禁止手机自带键盘弹出

禁止弹出方法 document.activeElement.blur(); 使用 <input type='text' name='text' i

喜欢ヅ旅行/ 2022年11月05日 06:28/ 0 赞/ 178 阅读

相关【Android】EditText进入页面默认不弹出软键盘

EditText进入页面默认不弹出软键盘在EditText外层布局/根布局加上 android:focusable="true" android

悠悠/ 2022年10月05日 09:55/ 0 赞/ 212 阅读

相关移动端禁止页面滑动

var mo=function(e)\{e.preventDefault();\}; function stop()\{ document.

骑猪看日落/ 2022年06月07日 12:00/ 0 赞/ 243 阅读

相关移动端禁止手机自带键盘弹出

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

逃离我推掉我的手/ 2022年05月27日 06:47/ 0 赞/ 245 阅读

相关解决移动端文本框被原生键盘弹出后挡住文本框

`Element.scrollIntoView()` > [https://developer.mozilla.org/en-US/docs/Web/API/Elemen

红太狼/ 2022年05月26日 23:53/ 0 赞/ 194 阅读

相关移动端禁止页面滚动

H5页面超过一屏，点击某处弹出弹出框提示，默认情况下，页面还可以滑动。解决方法： //添加禁止屏幕滚动 document.querySelector('.eleme

喜欢ヅ旅行/ 2022年05月21日 11:26/ 0 赞/ 258 阅读

相关 vue 移动端弹出键盘导致页面fixed布局错乱

话不多说，直接上问题图片 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNz

深碍√TFBOYSˉ_/ 2022年01月11日 05:09/ 0 赞/ 437 阅读

相关 Android 监听软键盘弹出/隐藏，控制软键盘弹出/隐藏

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5f

傷城~/ 2021年09月07日 06:21/ 0 赞/ 576 阅读