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

这里写图片描述

在Vue.js开发的H5应用中,有时安卓手机上使用软键盘会覆盖网页内容,导致页面滚动区域被隐藏。这是因为当用户点击输入框时,系统默认会将焦点切换到该输入框,并显示软键盘,这通常会导致页面顶部下移。解决这个问题的方法有几种: 1. **手动调整布局**:在页面加载完成后,监听window的resize事件,检查是否需要调整页面的样式,例如通过JavaScript设置body的padding-top等于键盘的高度。 ```javascript new Vue({ mounted() { document.addEventListener('DOMContentLoaded', function () { const keyboardHeight = document.body.scrollHeight - window.innerHeight; if (keyboardHeight > 0) { window.addEventListener('resize', handleResize); } }); function handleResize() { const keyboardHeight = document.body.scrollHeight - window.innerHeight; if (keyboardHeight > 0) { // 更新页面布局,如设置scrollTop、offsetTop等 this.$refs.yourInputEl.offsetTop; // 替换为实际的输入元素ID或引用 } else { window.removeEventListener('resize', handleResize); } } }, }); ``` 2. **使用CSS Hack**:针对某些浏览器,可以尝试使用`@media screen and (-webkit-min-device-pixel-ratio:0)`来调整viewport和position属性,以适应键盘出现的情况。 ```css @media screen and (-webkit-min-device-pixel-ratio:0) { body { padding-bottom: env(safe-area-inset-bottom); // 或者设置具体的键盘高度值 } } ``` 3. **利用Vue自定义指令**:创建一个全局指令,处理键盘显示和隐藏时页面的自动调整。 ```javascript Vue.directive('hideKeyboard', { inserted: function (el) { el.addEventListener('focus', function () { // 监听输入框获取焦点时,隐藏其他元素 // 或者直接处理页面滚动 const keyboardHeight = getKeyboardHeight(); if (keyboardHeight > 0) { el.style.position = 'fixed'; el.style.top = keyboardHeight + 'px'; } }); el.addEventListener('blur', function () { // 键盘失去焦点时恢复原状 el.style.position = ''; el.style.top = ''; }); } }); function getKeyboardHeight() { /* 获取键盘高度的方法 */ } ```
评论 26
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值