textarea 键盘弹起

### 解决 `<textarea>` 元素在键盘弹起时的行为或样式调整

#### 使用 CSS 进行基础适配
为了确保 `<textarea>` 的字体大小与其他输入元素保持一致，在 `flexible.css` 文件中加入特定的选择器可以解决不同设备上可能存在的显示差异：

button,
input,
optgroup,
select,
textarea {
    font-size: 100%;
}

此段代码通过设置统一的相对字号，使得所有表单控件能够继承父级容器的文字尺寸比例[^1]。

#### 利用 JavaScript 实现更精细控制
对于移动浏览器中的软键盘触发事件监听尤为重要。当用户点击 `<textarea>` 导致虚拟键盘显现时，页面高度会发生变化。此时可以通过检测窗口尺寸的变化来判断是否为软键盘弹出，并据此执行相应操作：

const originalHeight = document.documentElement.clientHeight;
window.addEventListener('resize', () => {
    const currentHeight = document.documentElement.clientHeight;
    const activeInput = document.activeElement;

    if (originalHeight > currentHeight && (activeInput.tagName === 'TEXTAREA')) {
        // 当前处于软键盘打开状态且焦点位于 <textarea>
        activeInput.scrollIntoView({
            behavior: "smooth",
            block: "center"
        });
    } else if (currentHeight >= originalHeight){
        // 软键盘关闭后恢复默认滚动位置
        window.scrollTo(0, 0);
    }
});

上述脚本不仅适用于 `<textarea>` ，同样也兼容其他类型的可编辑区域（如 `<input type="text">`）。它会自动将当前获得焦点并激活了软键盘的文本框居中展示于视窗内，从而改善用户体验[^2]。

#### 结合 flexible.js 提升响应能力
考虑到移动端屏幕分辨率多样性带来的挑战，借助 `flexible.js` 可以为整个网页提供更加灵活的基础布局方案。该库主要负责根据实际设备像素比(DPR)动态调整 HTML 文档根节点下的两个重要属性——`data-dpr` 和 `font-size`，进而影响到全局样式的计算逻辑[^3]。