美文网首页
H5软键盘遇到bug系列

H5软键盘遇到bug系列

作者: 池鱼_故渊 | 来源:发表于2020-10-09 15:01 被阅读0次

ios 部分原生滚动不流畅

解决方案:-webkit-overflow-scrolling:touch
使用该属性时,滚动时所有的事件都不会触发,尽量不要使用定位元素,可能会造成页面卡顿
mdn 详细解释
https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling

blur 和 click 触发的先后顺序问题

当在输入框中输入内容,点击发送按钮,这个时候应该触发失焦事件(blur)和点击事件(click),因为发送按钮的位置做了判断,当失去焦点的时候,发送按钮就不显示,此时发现,失去焦点正常触发,但是点击事件并没有触发,
所以 blur > click
这个时候如果我们想要触发点击事件,我们可以使用mousedown,mousedown触发的优先级高于blur
mousedown > click

textarea高度自适应问题

在移动端上面,我们想要设置textarea不被自由的拖动,可以设置 resize: unset;
高度自适应,只能在我在我们输入内容的时候去手动计算高度,并且改变textarea,

      <textarea
          class="textarea"
          id="textarea"
          ref="textarea"
          v-model="message"
          @input="onDivInput"
          @focus="getfocus"
          @blur="getblur"
          @keyup.delete="deleteText"
          @click="textClick"
          maxlength="200"
          placeholder="一起聊聊吧"
        ></textarea>
.....

  onDivInput() {
      event.target.style.height = ""; // 每次输入内容都重置高度,然后在重新计算,这样就可以在删除的时候高度也可自适应变化了
      console.log(event.target.scrollHeight);
      event.target.style.height = event.target.scrollHeight + "px";
    },

IOS 固定定位问题

当输入框需要固定在底部,我们滑动中间的内容时,底部固定定位的内容会消失,这是因为ios在页面滑动的时候,所有的固定定位效果会消失,所哟我们要让整个页面禁止滚动, overflow:hidden,我们只让中间的需要滚动的内容滚动,并且固定定位不要和中间滚动的内容放在一起,,这个时候发现滑动中间内容的时候,底部固定定位不会消失了,但是部分ios的机型,当我们键盘弹起的时候,拖动固定定位,整个页面仍然可以互滑动到键盘的下面,这个时候我们可以禁止底部固定定位的滑动事件(不得不说ios,软键盘的兼容问题真的是多)

关于输入框的光标问题。(ios)

只在ios上面的部分机型有问题,因为页面是嵌套进入ios的webview中,部分机型光标点击不出现,但是可以输入,网上看了大部分的方法,全部无解,最后ios调整webview的嵌套页面的布局方式才出现光标,问题虽然得到解决,但是仍然不知道是什么问题。(这个bug改的想死)

关于WKwebview 不能使用post请求(ios)

ios WKwebview 不支持https 的post请求,没有解决方案,http的可以用,如果是https但是不传参数也可以正常访问 否则只能用get

相关文章

网友评论

      本文标题:H5软键盘遇到bug系列

      本文链接:https://www.haomeiwen.com/subject/udklpktx.html