js之兼容

发表于 | 分类于


移动端

input弹出软键盘定位问题

安卓机场景：页面内容较少，按钮被绝对过固定定位到页面底部。弹出软键盘的时候页面高度设为100%或100vh都会缩小，导致按钮上移。
问题原因：绝对定位和固定定位都会脱离文档流。

1
2
3
4
// 解决方案：方案1、将页面撑满，不用定位。方案2、监听input聚焦onfocus事件，触发的时候隐藏按钮，失焦的时候显示按钮
// 方案1
let height = document.body.offsetHeight // 在软键盘弹出之前计算页面高度
document.querySelector('.page-class).style.height = `${height}px`
input弹出软键盘又关闭后页面整体上移
1
2
3
4
5
6
7
8
9
10
let input = document.querySelectorAll('input')
[...input].forEach(item => {
  item.onblur = () => {
    setTimeout(() => {
      const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
      window.scrollTo(0, Math.max(scrollHeight - 1, 0))
      // window.scrollTop第一个参数为x轴，第二个参数为y轴，因为页面的滚动条是window和document的，但是window和document没有scrollTop属性
    }, 100)
  }
})
ios机型点击事件失效
1
2
3
4
5
6
将 click 事件直接绑定到目标元素(即 .target ) 上
将目标元素换成 <a> 或者 <button> 等可点击的元素
给目标元素添加一个空的 onclick=""(<div class="target"onclick="">点击我!</div>)
把 click 改成 touchend 或 touchstart（注意加上preventDefault）
将 click 元素委托到非 document 或 body 的父级元素上
给目标元素加一条样式规则 cursor: pointer; (cursor: pointer; -webkit-tap-highlight-color: transparent;)
input[type=file]上传文件问题
1
2
// 点击图片上传，有一个file属性，file属性有个size值要传递给后端，PC和一般手机都支持，但是小米手机不支持，size值为0，判断size是否为0，为0将图片转为base64，再讲base64转为file文件。
<input type="file" />