＜input＞ 输入的内容颠倒了 ，‘123’变成‘321’了

手机应用页面

在input 标签的输入框下输入内容后，内容颠倒了

例如：输入“123456”，显示的是“654321”

【问题背景】：

页面结构是：轮播图头部+N个<input>的表单+按钮，其中表单要设置可以滚动；

通过对表单增加以下样式实现滚动：

.lists {
    // 页面高度减去头部和底部，剩下的空间是表单的高度
    max-height: calc(100vh - 11.62rem);
    overflow-y: auto;
}

【问题原因】

当点击输入框弹出键盘的，页面的高度并不是全屏的高度，需要除去键盘的高度。当手机是一个小屏幕的时候，页面的高度可能小于11.62rem，因此表单max-height小于0

既：点击输入框的时候，弹出的输入键盘把input这个模块挤压没加载出来，当输入完成后收起键盘，表单才加载，导致数据颠倒了

【解决方案】

设置表单的高度通过获取全屏幕的高度去处理，不要用100vh，可以这样设置

 initHeigt() {
    // 获取设置滚动的元素
    const contentEle = document.querySelector('#content');
    // 获取其他固定元素
    const bannerEle = document.querySelector('#banner');
    // 获取元素的高度
    const { height: bannerHeight } = bannerEle.getBoundingClientRect();
    // 获取全屏的高度
    const clientHeight = document.documentElement.clientHeight || screen.height;
    // 设置需要滚动的元素的高度
    contentEle.style.height = clientHeight - bannerHeight + 'px';
},

！！本人遇到的问题，前端还在不断学习中，若哪里写得不对请多多指教，感谢各位大佬！！