正文 

当前位置： 首页 > IT > java教程

移动端键盘顶起遮挡输入框

mingweiyard mingweiyard     2023-03-15     240

关键词：

先上图

技术图片

 

技术图片
 

 通常在开发中我们会遇到这样输入框被遮挡的问题，那么该怎么解决呢？

 

方案一（兼容性优先）：

首先，把置底元素设置成，在页面的底部而非屏幕的底部

.page .bottom 
    position: absolute;
    bottom: 0;
    width: 100%;
    border: 0;
    text-align: center;
    z-index: 5;

然后，设置页面的高度，让按钮有置底的效果

.page 
    background: #fff;
    color: #384369;
    position: relative;
    width: 100%;
    overflow-y: auto;
    height: 100vh;
    min-height: 480px;

注意有最小高度，因为当键盘弹起时，100vh是缩小的那部分的高度，而不是屏幕高度
*如果有大屏的需求，适配一下就好

这样，当键盘弹起时，内容就是可以滚动的了，出于用户体验的需求，可以在focus输入框的时候，把滚动条划一下，露出输入框

function whenFocus()
        document.body.scrollTop = document.documentElement.scrollTop =86;

具体的数值可以再调整

方案二（兼容性优先）：
<div class="main">
    <div class="content"></div>
    <button></button>
</div>

设置content为 overflow: auto;
让content的高度为 100vh-buttonHeight

方案三（flex布局）：

使用第二种的html

.main
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
   .content 
        overflow: auto;

 

 

方案四（最稳妥）：

利用window.resize方法，这个方法的特性是：当调整浏览器窗口的大小时，发生 resize 事件。

data()
    return
        screenHeightNoChange: true,
    
,
mounted() 
    const self = this;
    window.onresize = () => 
        if (self.oldFullHeight) 
            self.screenHeightNoChange = document.documentElement.clientHeight === self.oldFullHeight;
            console.log(‘ self.screenHeightNoChange ‘ + self.screenHeightNoChange);
        
    ;
,

screenHeightNoChange==true的时候使用方法三，当==false的时候，将button变成position:relative; 就能解决问题了

其中在移动端我最常用的还是flex布局的办法

 

 

vue移动端点击输入框，弹出键盘，底部被顶起的问题(代码片段)

问题描述：Vue开发中，当我们相对于父视图的底部布局子控件时，需要用position:fixed，如果页面内容不是很长，没有超出屏幕范围，那就还好，没有问题；一旦超出屏幕范围，当你点击输入框... 查看详情

（vue）移动端点击输入框，弹出键盘，底部被顶起问题

参考技术Adata()  return    docmHeight:'0', //默认屏幕高度    showHeight: '0', //实时屏幕高度    hidshow:true //显示或者隐藏footer,    isResize:false//... 查看详情

移动端模拟键盘盖住表单

关于移动端页面弹出框被软键盘遮挡的问题移动端虚拟键盘遮挡页面输入框等元素的解决方案vue移动端input被输入法键盘挡住解决方法移动端弹出输入框遮挡问题处理方案 查看详情

移动端页面input输入框被键盘遮挡问题

<bodyclass="layout-fixed"><!--fixed定位的头部--><header></header><!--可以滚动的区域--><main><!--内容在这里...--></main><!--fixed定位的底部--><footer><inputtype 查看详情

移动端软件盘遮挡输入框问题

第一、首先解决软键盘影响布局的问题：　　软键盘弹出会改变浏览器可视区域的高度，安卓会触发window.resize事件，ios不会触发，所以如果页面元素的布局是以窗口大小为基准的话，会出现布局混乱；比如body的height：100%等等，... 查看详情

移动端中h5输入框在弹起键盘后被遮挡

参考技术A可见，键盘遮盖住了这个输入框，而且此时不能滚动，而按钮的设计为始终置底置底的按钮为fixed布局，观察得知，这样当键盘弹起时，其实页面的高度被缩短成类似于这样这样，始终置底的元素会遮盖住输入框，并且... 查看详情

关于移动端输入键盘遮挡页面

 问题显示：当吊起手机的软键盘的时候会遮住验证码输入内容，造成盲输入 问题解决： 在包裹登录的父元素样式上加:.login position:fixed; background-color:#fff; width:600px; box-sizing:border-box; border-radius:50px; margin:0auto; transform:tr... 查看详情

移动端输入法挡住输入框

问题：在移动端火狐浏览下，输入框键盘遮挡住解决方案：?element.scrollIntoView()：让元素滚动到可视区域?参数：true对象的顶端与当前窗口的顶部对齐????false对象的底端与当前窗口的顶部对齐代码如下：<!DOCTYPEhtml><html><... 查看详情

[vue]利用自定义指令处理系统键盘遮挡input输入框

...面的input在页面的位置比较靠下时，获取焦点会弹出系统键盘。在ios系统中键盘会把页面顶起来，让输入框在键盘上吗。但是一些安卓系统，键盘会盖住页面的输入框，这时候就需要H5做一些处理。1.利用Element.scrollIntoView()或者Ele... 查看详情

解决移动端键盘弹出后，遮挡住表单的问题(代码片段)

监听resize事件，然后定位到input、textarea输入框，也可以理解为监听input或者textarea状态，当屏幕滚动到input或者textarea，上下居中。就可以解决键盘遮挡表单的问题了window.addEventListener('resize',()=>if(document.... 查看详情

解决移动端footerfixd定位被键盘顶起来的方案

 直接上代码：$(document).ready(function(){　　varu=navigator.userAgent;　　varisAndroid=u.indexOf(‘Android‘)>-1||u.indexOf(‘Adr‘)>-1;//android终端　　varisiOS=!!u.match(/(i[^;]+;(U;)?CPU.+MacOSX/);//ios 查看详情

移动端键盘遮挡input问题

在开发移动端项目的时候测试提出优化问题，即： input 获取焦点弹出系统虚拟键盘时， input 被键盘遮挡问题（PS：此问题只在安卓手机上有，ios系统是有自动处理的）。解决办法为：当 input 获取焦点时，... 查看详情

移动端iosh5（vue）界面被键盘顶起，键盘收起后无法恢复正常

参考技术APS：window.scrollTo不了解的可以点这里哦scrollTo借来同事的手机试了试，真的是激动.....用了两部iPhone手机测试，都ok了！！！nice这个问题就这样可以解决了！另外，在开发中遇到一个问题就是，为了做一些设备的兼容，... 查看详情

移动端底部被输入法顶起的解决办法

在微信端时发现固定在底部的按钮在页面调用输入法的时候会被顶起来，多次测试发现只是在安卓上面，听说ios有时也会，不过没遇见，最后采用的方法是不给底部设定固定绝对定位，直接采用计算clientHeight来确定底部的位置，... 查看详情

移动端底部input被弹出的键盘遮挡(代码片段)

...tps://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView 移动端input被键盘遮挡，事件是跳到可视区域！document.querySelector(‘#inputId‘).scrollIntoView();//只要在input的点击事件，或者获取焦点的事件 还有一个事件是指定在上方或... 查看详情

解决点击输入框调起键盘时，输入框被键盘遮挡的问题

<inputonfocus=‘foucs"/>　　functionfoucs(){varclient_y=document.body.clientHeight;//parent.scroll(0,clinet_y/2);把页面向上滚动半个页面的距离}　　 查看详情

androiddialog中软键盘遮挡输入编辑框edittextt

参考技术A自定义dialog布局中有编辑框,点击弹出软键盘后软键盘遮挡编辑框1,需要设置dialog.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN|WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);2,将dilog的自定义布局外层用ScrollView包... 查看详情

安卓手机底部输入框被软键盘遮挡的坑

...机浏览器及webview上，底部position为fixed的输入框被手机软键盘给遮挡了，小米手机及iphone没有问题。下图分别为底部输入框被遮挡及底部输入框没有被遮挡的情况：题外话：1、客服对话系统注意考虑到不能太短的心跳时间，因为... 查看详情