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

iOS小屏页面光标错位问题解析

最新推荐文章于 2023-05-04 15:14:45 发布

原创最新推荐文章于 2023-05-04 15:14:45 发布 · 305 阅读

0 ·

CC 4.0 BY-SA版权

日常专栏收录该内容

2 篇文章

订阅专栏

在移动端开发中，光标错位是个常见问题，尤其在小屏iOS设备上更为突出。当软键盘弹出并挤压页面时，光标位置不正确，即使键盘收起页面恢复，光标依然停留在原始位置，导致页面点击失效。解决办法是在输入框失去焦点时，确保scrollTop回到顶部，以纠正光标位置。

部署运行你感兴趣的模型镜像

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

var telephone = document.querySelector("#telephone");
telephone.onblur = function () {
    setTimeout(()=>{
          window.scrollTo(0,0)
    },300)
}
可能不太优雅 ，但是有用，有更好的办法希望指导，哈哈哈