2020-09-29解决input聚焦后，键盘弹起覆盖页面的问题

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

情绪乱了思绪

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

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/xiaodingdang222/article/details/108866683

在安卓设备上，当用户聚焦input输入框时，键盘弹起可能会覆盖页面内容，影响用户体验。本文提供了一个Vue.js的解决方案：通过判断input是否在可视区域内，若不在，则调整滚动条位置，确保input位于视口内。具体的实现包括HTML、JS和CSS代码示例，作者欢迎交流和指导。

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

我们在生活中经常会遇到一个一个问题，用户在填写表单数据时，遭遇input聚焦后键盘弹起覆盖住了，很影响用户体验

点击默认提示为我是第三个的input 遭遇被键盘覆盖

这个情况一般在安卓手机上会出现，那么我们怎么解决这个问题呢。原理：

判断当前点击的input是否在可视区域内，你点击的input元素是否在可是区域内，在可视区域内我们不需要做任何操作。如果不在可视区域内，需要将滚动条滚动到你所需要的位置，滚动的数值也取决于当前你在页面的位置。滚动的位置为当前元素位置 - 可是范围内的位置 = 弹起高度。最后将滚动条的位置为 = 当前滚动条位置+弹起高度+元素本身位置，元素本身位置可以稍微设置的大一点。下面放一个vue版本的demo

html：

<template>
<div class="list" @scroll="scroll">
<div class="list1">
  <!-- 第一个input -->
<div class="one">
  <input type="text" placeholder="我是第一个" @focus="focus($event)" @blur="blur"/>
</div>
<!-- 第二个input -->
<div class="one">
<input type=