移动端输入框弹起影响布局(包括fixed布局情况)

最新推荐文章于 2025-06-30 11:46:50 发布

catherinawwww

最新推荐文章于 2025-06-30 11:46:50 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：技术资料文章标签：输入框布局

本文链接：https://blog.youkuaiyun.com/weixin_38747509/article/details/80652058

技术资料专栏收录该内容

188 篇文章

订阅专栏

本文介绍了一个简单的JavaScript函数，用于在浏览器窗口调整大小时确保输入框（input或textarea）始终可见。通过监听resize事件并使用scrollIntoViewIfNeeded方法，可以有效地避免输入框被页面元素遮挡的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 window.scrollIntoViewIfNeeded

具体代码

window.addEventListener('resize',function(){

if(document.activeElement.tagName === "INPUT" || document.activeElement.tagName === "TEXTAREA"){

    window.setTimeout(function(){
        document.activeElement.scrollIntoViewIfNeeded();
      },20)

}
})

监听resize，当是input或者textarea的时候，触发此函数

（PS： ①、使用 === 而不是 == 的原因是， === 比 == 的速度要快；②、setTimeout最小执行毫秒数是20，而不是0，就算设置是0，也会有20ms的延迟。通常情况下，这段代码可满足。详情查阅MDN）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

catherinawwww

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue安卓移动端点击input输入框引起布局混乱

前端程序员、项目经理、人工智能博主

12-04

1847

问题描述：Vue开发中，当我们相对于父视图的底部布局子控件时，需要用position:fixed，如果页面内容不是很长，没有超出屏幕范围，那就还好，没有问题；一旦超出屏幕范围，当你点击输入框，弹出键盘时，底部固定定位的子控件就会被顶起来。这个问题在iOS端不会出现，在安卓端会出现，原因是键盘加载方式不一样，这里不作详情解答。解决方案：在键盘弹起时，页面高度变小，底部固定定位上升，所以我们只需要在页面高度变小时，隐藏底部子控件，当键盘消失时再显示底部子控件。解决方法：检测浏览器的resize事件，当高度

uniapp - 移动端H5网页点击输入框弹出软键盘后，收起后页面无法复原，页面没能恢复原状+遮盖遮挡+布局出现上移或下移整体未复原到打开软键盘之前（解决弹出键盘导致页面布局错乱，安卓+苹果ios）

资深程序员

04-08

6135

uniapp，微信公众号网页，h5移动端开发，uniapp h5平台输入框弹起软键盘，收起后导致页面无法复原的问题，uniApp输入框弹起软键盘，收起后导致页面无法复原的问题，uniapp移动端的软键盘对页面css布局影响的解决办法-底部样式被顶起，弹起键盘遮盖输入框键盘弹起后不恢复，键盘不收回，input输入时软键盘弹起不能自动收回，UNI-APP页面中input输入框弹起软键盘，收起后会导致页面被顶起，无法复原，H5移动端键盘收起后页面上移不复位，软键盘弹出，布局没有上移，弹出软键盘的时候页面顶起不恢复

参与评论您还未登录，请先登录后发表或查看评论

移动端输入框焦点时，键盘弹起后页脚的fixed被遮挡解决方案

liyichuanZhengzhou的博客

06-08

551

移动端(手机端) input 输入框焦点时，键盘弹起后，页脚的fixed被遮挡解决方案

移动端弹框设计总结

weixin_34038293的博客

06-03

178

转载于:https://www.cnblogs.com/momox/p/5556758.html

如何解决input遇到fixed，absolute布局出现的问题

weixin_33813128的博客

06-27

1076

最近在做手机端input，关于吊起系统软键盘遇到一些问题，小米部分手机absolute定位导致页面文档错乱问题，ios手机对页面提示或者弹窗布局问题，先总结如下： input碰撞的系列火花： 1. input和absolute使用弹起系统输入框，android部分手机压盖问题；当input无论是absolute还是fixed定位在页面的某一个位置，android手机吊起系统软键盘，掩盖在inp...

移动端fixed定位按钮在底部，键盘弹起，底部按钮顶上去

MtangEr的博客

04-02

6652

页面效果如图所示： input/texteare输入框回去焦点，键盘弹起。固定定位在底部的按钮被顶起。原因，页面size 变化。在这里插入代码片解决办法：检测浏览器的resize事件，当高度过小时就可以判定为出现这种情况，这时把定位改成absolute或者直接隐藏掉之类的。下边写一个隐藏的方法 1.html页面 <div v-show="isOriginHei" >下一...

H5移动端弹出键盘时遮挡输入框

abcde158308的博客

09-20

5953

记一次，解决移动端文本框弹出键盘遮挡输入框的方法: document.activeElement.scrollIntoViewIfNeeded(); 方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。使用方法： var input= document.getElementById("input");...

手机软键盘弹出时影响布局的解决方法

08-31

总的来说，解决手机软键盘弹出影响布局的方法主要包括动态设置页面高度、调整输入框的位置或大小，以及尽可能使用广泛支持的CSS属性和单位。在实际开发中，还需要根据目标用户群体的设备和浏览器特性进行测试和优化...

Vue2 - 移动端H5网页点击输入框弹出软键盘后，收起后页面无法复原的问题，页面没能恢复原状+遮盖遮挡+布局出现上移或下移整体未复原到打开软键盘之前（解决弹出键盘导致页面布局错乱，安卓+苹果ios）

资深程序员

04-07

5832

vue，移动端网页，输入框弹起软键盘，布局没有上移，弹出软键盘的时候页面顶起不恢复，实现移动端自动弹起软键盘，软键盘挡住输入框的解决方案，移动端技术问题 — H5页面底部弹出页input输入时整个弹出页被输入法顶起的解决方法，vue h5页面软键盘遮挡等，软键盘顶起页面，H5，input输入时，软键盘弹起不能自动收回，移动端软键盘监听弹出收起及影响定位布局，H5-input弹起键盘遮盖输入框，收起后导致页面无法复原的问题，输入框弹起软键盘，收起后导致页面无法复原的问题，移动端的软键盘对页面css布局影响的解

Vue2 - 手机移动端H5网页强力解决弹起软键盘后页面被挤压变形或页面整体上移问题，点击input输入框键盘弹出底部被上推往上顶遮挡及各种问题（兼容安卓苹果ios手机，微信公众号网页微信内置浏览器）

最新发布

资深程序员

06-30

3740

vue，h5网页，窗口顶起，变形解决办法，Vue中input组件在IOS设备上弹出软键盘时页面整体上移问题的解决方案，以及input组件聚焦后弹出软键盘固定在，Vue3软键盘把界面顶起问题解决，vue解决键盘弹出页面内容挤压问题，input输入框组件，vue h5软键盘弹出，vue输入框，键盘弹起时页面整体上移问题，H5页面，解决软键盘弹起页面被挤压、被往顶的问题，解决vue输入框，键盘弹起时页面整体上移问题，vue调用手机系统软键盘，页面窗口被顶起，解决vue键盘弹起后顶部的导航栏往上顶的问题，键盘弹起时

前端项目开发中碰到的坑、移动端兼容性问题

thewar196的博客

03-25

7472

前端开发碰到的坑、移动端兼容性问题、

IOS软键盘撑起页面下不来的解决方案

weixin_42331327的博客

08-23

880

近来微信更新后，相信前端开发工程师们会不会遇到一个问题：当页面有输入框，下拉框，等…只要会弹出软键盘时就会遇到一个问题，IOS中当使用完软件盘收起的时候页面还是被顶起的状态，不会下来，需要用户手动去将页面给拉下来，不然感觉会很奇怪，相信不少人以为自己的手机出啥毛病了？最后发现其实IOS大部分手机型号都是这样，最尴尬的是，被顶去的页面别看那个位置有个按钮，你点击后根本没反应，很尴尬，不说了，上代码...

vue下使用scrollIntoView()进行锚点跳转导致整个页面产生偏移的问题及解决办法

qq_41973957的博客

05-10

6780

vue下使用scrollIntoView()进行锚点跳转页面偏移问题及解决方案

如何解决使用scrollIntoView()导致页面上移

Alone_Endeavor的博客

05-15

1852

例如document.getElementById('BY').scrollIntoView()可使相应的目标盒子返回其顶部。在项目中，我们如果实现让指定盒子回到document顶部，可以使用scrollIntoView()方法，使用position:fixed;相对浏览器定位并且top:0;该方法解决了父元素位置偏差，直接相对于浏览器进行定位；使用该方法时，会让其最外层的盒子向上偏移；目前本人在开发过程中就遇到了类似问题；该方法虽然好用，但也有相应的弊端；目前只对谷歌和火狐浏览器兼容；

移动端H5开发常用小技巧（总结）

qq_43067585的博客

09-16

950

本篇文章给大家整理一些在移动端H5开发常见的问题给大家做下分享，这里很多是在开发过程中遇到的大坑或者遭到过吐糟的问题，希望能给大家带来或多或少的帮助。 html 篇常用的meta属性设置 meta对于移动端的一些特殊属性，可根据需要自行设置 <meta name="screen-orientation" content="portrait"> //Android 禁止屏幕旋转 <meta name="full-screen" content="yes">

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

齐枫的博客

04-08

2535

本文转载地址https://blog.youkuaiyun.com/qq_20353887/article/details/74331419 记一次，解决移动端文本框弹出键盘遮挡输入框的方法: document.activeElement.scrollIntoViewIfNeeded(); 方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。如果该元素已经在浏览器窗口的可见区...

移动端input“输入框”常见问题及解决方法

weixin_44271360的博客

06-11

2323

移动开发常见问题：https://www.cnblogs.com/ljx20180807/p/9837748.html

移动端键盘弹出影响布局的处理方法

liujiujiang的博客

04-15

8621

这几天做了关于移动端的一些页面，发现了一些问题，在这记录下，备用也供大家参考下1：移动端通过%布局，当页面出现键盘时，页面高度改变从而会压缩整个页面（1） var viewHeight = window.innerHeight; $(document).ready(function () { var viewHeight = window.innerHei...

h5兼容安卓和iOS的键盘弹出影响布局的坑

移动端输入框弹起影响布局(包括fixed布局情况)

使用 window.scrollIntoViewIfNeeded

具体代码

window.addEventListener('resize',function(){

if(document.activeElement.tagName === "INPUT" || document.activeElement.tagName === "TEXTAREA"){

window.setTimeout(function(){ document.activeElement.scrollIntoViewIfNeeded(); },20)

}})

监听resize，当是input或者textarea的时候，触发此函数

（PS： ①、使用 === 而不是 == 的原因是， === 比 == 的速度要快；②、setTimeout最小执行毫秒数是20，而不是0，就算设置是0，也会有20ms的延迟。通常情况下，这段代码可满足。 详情查阅MDN）

window.setTimeout(function(){
document.activeElement.scrollIntoViewIfNeeded();
},20)

}
})

（PS： ①、使用 === 而不是 == 的原因是， === 比 == 的速度要快；②、setTimeout最小执行毫秒数是20，而不是0，就算设置是0，也会有20ms的延迟。通常情况下，这段代码可满足。详情查阅MDN）