iphone端h5页面底部输入框被键盘遮挡问题

iphone端h5页面底部输入框被键盘遮挡问题

h5页面在底部放置输入框时,如图
iphone端h5页面底部输入框被键盘遮挡问题_第1张图片

在ios端会出现输入框获取焦点后,中文输入法上横条完全挡住输入框问题,搜索解决方法,在input获取焦点时执行函数,主要scrollIntoView方法

 setTimeout(() => {
            el.scrollIntoView(true);   //el为input元素
 },100)

在定时100ms后执行,然而在真机测试出现,有事挡住有事不会挡住的情况。
分析原因可能是在100ms的时间设置问题,在100ms时间软键盘还未完全弹出就已经执行方法,没有使元素完全适应软键盘位置。将定时时间改为500ms后解决该问题

你可能感兴趣的:(前端,vue,javascript)