今天小编跟大家讲解下有关总结几个移动端H5软键盘的大坑 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关总结几个移动端H5软键盘的大坑 的相关资料，希望小伙伴们看了有所帮助。
解决方法：可以通过监听移动端软键盘弹起
Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。参数如下。
true 表示元素的顶部与当前区域的可见部分的顶部对齐false 表示元素的底部与当前区域的可见部分的尾部对齐Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内 则不会发生滚动。此方法是标准的Element.scrollIntoView()方法的专有变体。
window.addEventListener('resize', function() { if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { window.setTimeout(function() { if ('scrollIntoView' in document.activeElement) { document.activeElement.scrollIntoView(false) } else { document.activeElement.scrollIntoViewIfNeeded(false) } }, 0) }})2、ios 键盘收起时页面没有回落 底部会留白部分苹果手机填写表单的时候的 输入内容后关闭软键盘 底部会留一块空白。这种情况可以通过监听键盘回落时间滚动到原来的位置。
window.addEventListener('focusout', function() { window.scrollTo(0, 0)})//input输入框弹起软键盘的解决方案。var bfscrolltop = document.body.scrollTop$('input') .focus(function() { document.body.scrollTop = document.body.scrollHeight //console.log(document.body.scrollTop); }) .blur(function() { document.body.scrollTop = bfscrolltop //console.log(document.body.scrollTop); })3、onkeyUp 和 onKeydown 兼容性问题部分 ios 机型 中input键盘事件keyup、keydown、等支持不是很好, 用input监听键盘keyup事件 在安卓手机浏览器中没有问题 但是在 ios 手机浏览器中用输入法输入之后 并未立刻相应keyup事件
onkeypress用户按下并放开任何字母数字键时发生。系统按钮（箭头键和功能键）无法得到识别。onkeyup用户放开任何先前按下的键盘键时发生。onkeydown用户按下任何键盘键（包括系统按钮 如箭头键和功能键）时发生。4、ios12 输入框难以点击获取焦点 弹不出软键盘定位找到问题是fastclick.js对ios12的兼容性 可在fastclick.js源码或者main.js做以下修改
FastClick.prototype.focus = function(targetElement) { var length if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') { length = targetElement.value.length targetElement.setSelectionRange(length, length) targetElement.focus() } else { targetElement.focus() }}5、fastclick 导致下拉框焦点冲突移动端使用fastclick之后 在 ios 环境下 有几个连续的下拉框 第一个select框突然填充了第二个下拉框的内容。
根本原因是Fastclick导致 ios 下多个select 点击某一个 焦点不停变换的 bug。修改源码 在 onTouchStart 事件内判断设备是否为 ios 再判断当前nodeName是否为select 如果是return false去阻止fastClick执行其他事件。
github 源码地址：fastclick.js
//line 391行FastClick.prototype.onTouchStart = function(event) { //在其方法中添加判断 符合ios select的时候 不返回事件 if (deviceIsIOS && this.targetElement == 'select') this.targetElement = null event.preventDefault()}//line521 或者讲源码中 有关touchEnd判断非ios或者非select的事件注释 if (!deviceIsIOS || targetTagName !== 'select') { this.targetElement = null event.preventDefault()}6、ios 下 fixed 失效的原因软键盘唤起后 页面的fixed元素将失效 变成了absolute 所以当页面超过一屏且滚动时 失效的fixed元素就会跟随滚动了。不仅限于type=text的输入框 凡是软键盘（比如时间日期选择、select 选择等等）被唤起 都会遇到同样地问题。
解决方法: 不让页面滚动 而是让主体部分自己滚动,主体部分高度设为 100% overflow:scroll
<body> <div class='warper'> <div class='main'></div> <div> <div class="fix-bottom"></div></body>.warper { position: absolute; width: 100%; left: 0; right: 0; top: 0; bottom: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; /* 解决ios滑动不流畅问题 */}.fix-bottom { position: fixed; bottom: 0; width: 100%;}7、ios 键盘换行变为搜索input type="search"input 外面套 form 必须要有 action action="JavaScript:return true"表单提交阻止默认提交事件<form action="JavaScript:return true" @submit.prevent="formSubmit"> <input type="search" placeholder="请输入诉求名称" id="search" /></form>来源：爱蒂网