总结几个移动端H5软键盘的大坑

时间 2020-03-24

标签总结几个移动 h5 键盘大坑栏目无线繁體版

原文原文链接

一、部分机型软键盘弹起挡住原来的视图

解决方法：能够经过监听移动端软键盘弹起javascript

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。参数以下。前端

true，表示元素的顶部与当前区域的可见部分的顶部对齐
false，表示元素的底部与当前区域的可见部分的尾部对齐

Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但若是该元素已经在浏览器窗口的可见区域内，则不会发生滚动。此方法是标准的Element.scrollIntoView()方法的专有变体。java

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)
  }
})

二、ios 键盘收起时页面没有回落，底部会留白

部分苹果手机填写表单的时候的，输入内容后关闭软键盘，底部会留一块空白。这种状况能够经过监听键盘回落时间滚动到原来的位置。node

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);
  })

三、onkeyUp 和 onKeydown 兼容性问题

部分 ios 机型中 input 键盘事件 keyup、keydown、等支持不是很好, 用 input 监听键盘 keyup 事件，在安卓手机浏览器中没有问题，可是在 ios 手机浏览器中用输入法输入以后，并未马上相应 keyup 事件webpack

onkeypress 用户按下并放开任何字母数字键时发生。系统按钮（箭头键和功能键）没法获得识别。
onkeyup 用户放开任何先前按下的键盘键时发生。
onkeydown 用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。

四、ios12 输入框难以点击获取焦点，弹不出软键盘

定位找到问题是 fastclick.js 对 ios12 的兼容性，可在 fastclick.js 源码或者 main.js 作如下修改ios

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()
  }
}

五、fastclick 致使下拉框焦点冲突

移动端使用 fastclick 以后，在 ios 环境下，有几个连续的下拉框第一个 select 框忽然填充了第二个下拉框的内容。git

根本缘由是 Fastclick 致使 ios 下多个 select ，点击某一个，焦点不停变换的 bug。修改源码，在 onTouchStart 事件内判断设备是否为 ios，再判断当前 nodeName 是否为 select，若是是 return false 去阻止 fastClick 执行其余事件。github

github 源码地址：fastclick.jsweb

//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()
}

六、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%;
}

七、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>