uniapp页面被键盘顶起

### UniApp H5 页面密码键盘弹起时页面被顶起的解决方案 对于 UniApp 开发中的 H5 页面，在处理密码键盘弹起导致页面被顶起的问题时，可以采取多种方法来优化用户体验并保持界面布局稳定。 #### 方法一：调整 `pages.json` 中的页面配置 为了防止页面因软键盘弹出而发生位移，可以在项目的 `pages.json` 文件中针对特定页面设置合适的属性。具体来说： ```json { "path": "pages/login/login", "style": { "app-plus": { "softinputMode": "adjustPan" } } } ``` 此配置项 `"softinputMode": "adjustPan"` 可以使窗口内容在软键盘显示时不改变大小而是整体上移[^1]。 #### 方法二：禁用表单位置自动调整 如果希望进一步控制输入框周围的区域不受影响，则可在 `<template>` 标签内的 `<form>` 或者包含输入控件的容器组件上添加属性 `:adjust-position="false"`: ```html <view> <!-- ... --> <form :adjust-position="false"> <!-- 输入框和其他表单项 --> </form> </view> ``` 这会阻止默认情况下由于焦点切换引起的视图滚动行为[^2]。 #### 方法三：动态管理背景高度 为了避免整个页面背景随着键盘升起而变形，建议不要将背景的高度设为固定的百分比值（如 `100%`），而是通过 JavaScript 获取当前屏幕可用高度，并将其应用到样式中： ```javascript export default { data() { return { screenHeight: 0, }; }, created() { this.screenHeight = uni.getSystemInfoSync().windowHeight; }, }; ``` 配合模板部分如下所示定义背景元素： ```html <view class="bg" :style="{ height: screenHeight === 0 ? '100%' : `${screenHeight}px` }"></view> ``` 这样即使键盘出现也不会干扰到背景层的位置和尺寸。 #### 方法四：监听键盘事件 更高级的做法是利用 API 来捕获键盘的状态变化，进而执行自定义逻辑。例如，可以通过插件或者其他方式实现对键盘高度变化的响应，从而更加灵活地应对不同场景下的需求[^3]。 ```typescript // 假设有这样一个函数用于注册键盘监听器 registerKeyboardListener((keyboardHeight) => { console.log(`The keyboard is now ${keyboardHeight}px tall.`); }); ``` 以上几种策略可以根据实际项目的需求组合使用，确保最佳效果的同时也兼顾了跨平台的一致性和稳定性。

### UniApp 中键盘弹出时顶起输入框解决方案 #### 使用 `adjustPosition` 属性控制页面行为 对于 textarea 或 input 组件，在键盘弹出时可能会导致整个页面被顶起，甚至 header 被隐藏。官方提供了一个属性 `adjustPosition='false'` 来防止这种情况发生。不过这样做虽然解决了页面被顶起的问题，但也带来了新的困扰——键盘会遮住输入框[^1]。 ```html <textarea adjust-position="false"></textarea> ``` #### 动态调整输入框位置的方法 为了既不让页面整体移动又能让用户正常看到并操作输入框，推荐采用动态调整输入框位置的方式。具体来说： - 将输入框通过 CSS 设置为 fixed 定位； - 利用 @focus 和 @blur 事件监听器来捕获焦点变化时刻； - 获取到键盘的高度后修改输入框距离屏幕底部的距离（即 bottom 值），当失去焦点时再将其重置回初始状态； - 对于包含页面头部和内容区的容器，可以通过 padding-bottom 的方式预留足够的空间给输入框以及其下方可能存在的其他元素显示出来，并且保持头部固定不变； - 整体布局建议使用 flexbox 实现响应式的垂直排列结构，其中内容区应具有自动增长的能力并且支持纵向滚动以便容纳更多数据[^2]。 ```css /* 输入框样式 */ .input-box { position: fixed; width: calc(100% - 2 * var(--safe-area-inset-left)); left: var(--safe-area-inset-left); } /* 页面主体样式 */ .page-container { display: flex; flex-direction: column; min-height: 100vh; .header { height: 50px; /* 如果不需要固定的头部高度可省略此行 */ } .content-area { flex-grow: 1; overflow-y: auto; } } ``` ```javascript // Vue 方法内处理逻辑 methods: { onFocus(event) { const keyboardHeight = event.detail.value.height || 300; // 默认值用于模拟测试环境下的情况 this.$refs['inputBox'].$el.style.bottom = `${keyboardHeight}px`; document.querySelector('.page-container').style.paddingBottom = `${this.getInputBoxHeight() + keyboardHeight}px`; }, onBlur() { this.$refs['inputBox'].$el.style.removeProperty('bottom'); document.querySelector('.page-container').style.removeProperty('padding-bottom'); }, getInputBoxHeight() { return parseFloat(window.getComputedStyle(this.$refs['inputBox'].$el).height.replace('px', '')); } } ```