问题描述：手机H5页面当input输入框获取 焦点 时， 软键盘 会弹起，这时：IOS底部固定定位的按钮不会随着键盘弹起而弹起；而 安卓 底部固定定位的按钮会跟随软键盘弹起而顶起，往往会遮挡一部分视图，这对用户的体验有点不好，故本篇 文章 将 利用 js来解决这个问题，优化用户体验。
1、解决思路当软键盘弹起时，将底部弹起的按钮隐藏；当软键盘收起时，将按钮 正常 显示。
2、确定捕获的事件（1）input输入框的聚焦/失焦事件
分析：当input输入框聚焦，软键盘弹起，将底部弹起的按钮隐藏；当点击视图任意位置，input输入框失焦，软键盘收起，按钮显示是行的通的。 不过 ，存在一个盲区：当点击软键盘的原生收起按钮‘’时，焦点仍然在输入框内，失焦事件无法被触发，按钮仍是隐藏状态！
结论：无法满足需求。
（2）window的resize事件
分析：不管是软键盘的弹起和收起事件都会立即触发window的resize事件，满足需求。
3、 绑定事件 // 获取视图原始高度 let screenH ei ght = document.body.offsetHeight // 为window绑定resize事件 window.onresize = function () { let nowHeight = document.body.offsetHeight if (nowHeight < screenHeight) { // 将底部弹起的按钮隐藏（可使用给按钮添加相应类） } else { // 将按钮正常显示（可使用给按钮移除相应类） } } 4、使按钮 消失 的方法（消失类的样式css） dis play : none; // DOM 元素直接不渲染，在文档流不占位置 visibil IT y: hidden; // DOM元素仍渲染，在文档流占位置，但不可见，不可触发事件 opacity: 0; // DOM元素仍渲染，在文档流占位置，但不可见，可点击，可触发事件 transform: tran latex (& # 39;500px'); // DOM元素仍渲染，在文档流占位置,只是移出了可见范围
问题描述：手机H5页面当input输入框获取焦点时，软键盘会弹起，这时：IOS底部固定定位的按钮不会随着键盘弹起而弹起；而安卓底部固定定位的按钮会跟随软键盘弹起而顶起，往往会遮挡一部分视图，这对用户的体验有点不好，故本篇文章将利用js来解决这个问题，优化用户体验。
1、解决思路当软键盘弹起时，将底部弹起的按钮隐藏；当软键盘收起时，将按钮正常显示。
2、确定捕获的事件（1）input输入框的聚焦/失焦事件
分析：当input输入框聚焦，软键盘弹起，将底部弹起的按钮隐藏；当点击视图任意位置，input输入框失焦，软键盘收起，按钮显示是行的通的。不过，存在一个盲区：当点击软键盘的原生收起按钮‘’时，焦点仍然在输入框内，失焦事件无法被触发，按钮仍是隐藏状态！
结论：无法满足需求。
（2）window的resize事件
分析：不管是软键盘的弹起和收起事件都会立即触发window的resize事件，满足需求。
3、绑定事件 // 获取视图原始高度 let screenHeight = document.body.offsetHeight // 为window绑定resize事件 window.onresize = function () { let nowHeight = document.body.offsetHeight if (nowHeight < screenHeight) { // 将底部弹起的按钮隐藏（可使用给按钮添加相应类） } else { // 将按钮正常显示（可使用给按钮移除相应类） } } 4、使按钮消失的方法（消失类的样式css） display: none; // DOM元素直接不渲染，在文档流不占位置 visibility: hidden; // DOM元素仍渲染，在文档流占位置，但不可见，不可触发事件 opacity: 0; // DOM元素仍渲染，在文档流占位置，但不可见，可点击，可触发事件 transform: tranlateX('500px'); // DOM元素仍渲染，在文档流占位置,只是移出了可见范围
觉得 可用，就经常来吧！ 欢迎评论哦！&nbs p; html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-H5如何解决安卓中input输入框获取焦点后，底部固定定位的按钮顶起问题？ 全部内容，希望文章能够帮你解决 html5教程-H5如何解决安卓中input输入框获取焦点后，底部固定定位的按钮顶起问题？ 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-H5如何解决安卓中input输入框获取焦点后，底部固定定位的按钮顶起问题？的详细内容...