记录实用有价值的内容

iOS 端input输入框失焦后视图错位问题

问题:iOS 端,输入框失焦之后,屏幕不归位,

根据用户交互的情况,当用户手动滚动屏幕时,错位问题会立即自动纠正,那么我们就可以使用一个简单方便的方法:当输入框失去焦点时,将屏幕往上或者下滚动1像素,然后再滚回去归位,就可以解决此问题。

由于滚动距离1像素加上操作的时间间隔很短,用户是看不到这个滚动效果的

此处使用VUE写法,其它框架改下事件绑定即可:

<input type="text" @blur="checkInput" />
<textarea @blur="checkInput"></textarea>

处理函数如下:

checkInput() { // 调整输入框失焦后视图错位问题
    let
    cur_position,
    timer,
    speed = 1; // 页面滚动距离
    timer = setInterval(function () {
        cur_position = document.documentElement.scrollTop || document.body.scrollTop
        cur_position -= speed
        window.scrollTo(0, cur_position) // 页面向上滚动
        cur_position += speed //speed变量
        window.scrollTo(0, cur_position) // 页面向下滚动归位
        clearInterval(timer)
    }, 1)
}


上一篇:A 标签隐藏链接的参数