小屏ios页面恢复是光标错位

2021年9月1日 13点热度 0条评论 来源: springLilly

移动端页面的定位会影响光标位置,相信很多人都遇到过,然而在整个页面没有用到定位的情况下还是遇到了光标错位的问题。
尤其是小屏的ios手机,原因是移动端在点击input输入的时候软键盘弹出,整个页面被键盘往上挤压,然而光标的位置也被挤压,收起软键盘的时候页面恢复,但是光标还是在原来input的位置,(输入验证码点击发送按钮,键盘会自动收起来,使页面恢复)
就导致光标不在该在的地方,整个页面呈现无法点击的状态,向上点击就会点击到input框,实际上原来input的框并不能点击,
在软键盘收起(也就是失焦)的时候scrollTop回顶部
ps 因为一般情况下有手机号和验证码两个input,如果小屏手机的话,输入完

var telephone = document.querySelector("#telephone");
telephone.onblur = function () { 
    setTimeout(()=>{ 
          window.scrollTo(0,0)
    },300)
}
可能不太优雅 ,但是有用,有更好的办法希望指导,哈哈哈
    原文作者:springLilly
    原文地址: https://blog.csdn.net/springLilly/article/details/109994461
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。