前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

ios浏览器中弹窗填地址时,光标错位

移动端
场景:

    vue项目,弹窗是fixed布局,在表单input输入内容时,光标错位

解决方案:

    通过watch属性来解决,代码如下:


watch: {
    //解决ios input 输入的时候光标错位
    tipDialogData: {
      handler(newV, old){
        let oldStyle = document.body.style.cssText;
        setTimeout(_ => {
          if(newV[0].show || newV[1].show) {
            document.body.style = `${oldStyle};position:fixed;width:100%;`
          }else {
            document.body.style = `${oldStyle};position:relative;`
          }
        }, 50)        
      },
      deep: true
    }
  }

以上是具体项目中的代码,弹窗的显示是数组中的show属性,如是单一变量控制就更简单了,快试试吧!

以上仅仅是解光标错位问题,但是弹窗之后页面会置顶,这样交互体验就差了好多,解决这个问题也简单,就是在弹窗之后,脚本控制滚动的位置,这样一来在弹窗之前就必需记下其滚动的值,在弹窗之后,body样式再加:margin-top为-的滚动值即可,具体代码如下:

1.在弹窗之前


let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

2.弹窗时:


document.body.style = `${document.body.style.cssText};position:fixed;width:100%;margin-top:-${scrollTop}px`;

3.弹窗关闭时:


document.body.style = `${document.body.style.cssText};position:relative;margin-top:0;`;
            window.scrollTo(0, this.scrollTop);

这样问题就解决了。



转载请注明:前端录»ios浏览器中弹窗填地址时,光标错位