一、使用 JavaScript 结合事件监听和计算（适用于网页应用等）
-
监听键盘事件
- 对于 iOS 可以监听
focusin（元素聚焦）和focusout（元素失去焦点）事件来大致判断键盘的弹出和收起。 - 对于 Android 监听
resize事件（因为软键盘弹出会改变视口大小）。可以在resize事件触发后获取新的窗口高度等信息与之前的比较判断键盘状态。
- 对于 iOS 可以监听
-
位置计算和设置
-
当监听到键盘弹出后，获取元素期望吸附的位置（比如屏幕底部 - 键盘高度）。
-
通过
position: absolute或fixed（如果希望相对屏幕固定）以及bottom、left等 CSS 属性设置元素位置。
-
示例代码（简单示意，处理不同浏览器差异等细节未完整包含）
window.addEventListener('resize', function() {
if (window.innerHeight < previousHeight) { // 假设previousHeight是之前记录的高度
// 键盘弹出，计算位置并设置元素
const element = document.getElementById('adhesiveElement');
element.style.position = 'fixed';
element.style.bottom = calculateBottomPosition(); // 自己实现计算底部位置
}
});
二、在移动端原生应用（Android 和 iOS 分开处理）
Android 部分：
-
在布局文件中，将需要吸附的元素放置在底部，当软键盘弹出时：
-
可以在
Activity中监听软键盘状态改变事件（通过注册OnGlobalLayoutListener等方式监听布局变化等间接判断键盘情况 ）。 -
根据键盘高度动态调整布局中对应元素的
layout_marginBottom等参数来实现类似吸附。
-
iOS 部分：
-
可以使用
UITextField或UITextView的委托方法来检测输入框开始编辑和结束编辑等行为。 -
在编辑开始时，根据键盘高度和当前视图布局来通过代码调整元素的位置（如
frame等）。
三、混合开发模式（如 Cordova 等构建的应用）
结合网页端的 JavaScript 代码逻辑处理（类似上述一），同时利用混合开发框架提供的一些原生插件或扩展来更好地处理原生层面的键盘事件和交互等，以更好地实现元素吸附。
四、使用特定的移动端 UI 框架（如 React Native 、Flutter 等）
-
React Native：
- 通过
KeyboardAvoidingView组件来包裹需要处理的元素，它有几种不同的策略（如padding、position等）来处理键盘弹出时的布局调整。
- 通过
-
Flutter ：
- 有
Scaffold的resizeToAvoidBottomInset属性设置为true（这会自动调整可滚动内容避免被键盘遮挡，但不完全是严格意义上的吸附） ，也可以根据键盘显示状态手动调整元素位置等。
- 有
