JS IOS
前言
在项目开发的过程中,在IOS手机端系统下,当对输入框(input/textarea)进行focus操作时,键盘弹起遮住输入框。
问题描述
- 从页面底部focus输入框失败
- 从页面中间focus输入框失败
原因
造成上述问题的:键盘弹起事件和输入框滚动到浏览器窗口的可见区域的事件有冲突。
解决步骤
根据不同的情况有不同的解决办法:
- 从页面底部focus输入框失败:
使用scrollIntoView
方法:该scrollIntoView()
方法将调用它的元素滚动到浏览器窗口的可见区域。
setTimeout(() => {document.activeElement.scrollIntoView()
}, 200)
注意:这里需要使用settimeout去异步请求
- 从页面中间focus输入框失败:
let screenHeight = window.innerHeight;let keyboardHeight = 0let time = 0;// 获取键盘高度let interval = setInterval(() => {if (screenHeight !== window.innerHeight) { keyboardHeight = screenHeight-window.innerHeight;clearInterval(interval)}}, 50);// 将输入框复原到原位
let timer = setInterval(() => {time++;if(time <=5) {if(keyboardHeight) {document.documentElement.scrollTop = keyboardHeight + 110}} else {clearInterval(timer)}}, 50);
后言
希望本文会对你有所帮助,如果有什么问题,可在下方留言沟通