总结几个移动端H5软键盘的大坑【实践】

bigegpt 2024-10-12 06:28 3 浏览

转载链接：https://segmentfault.com/a/1190000022115177

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

解决方法：可以通过监听移动端软键盘弹起

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>

touchstart

上一篇：移动端tap事件移动端滚动页面事件
下一篇：「神器」Chrome开发者工具使用教程

总结几个移动端H5软键盘的大坑【实践】

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

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

3、onkeyUp 和 onKeydown 兼容性问题

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

5、fastclick 导致下拉框焦点冲突

6、ios 下 fixed 失效的原因

7、ios 键盘换行变为搜索

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

Docker 命令大全（docker命令大全记录表）

替代Docker build的Buildah简单介绍

Docker Desktop安装使用指南:零基础教程

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解