新思维网站,北京住房建设部网站首页,为公司建设网站的意义,百度容易收录的网站 JS IOS
前言
在项目开发的过程中#xff0c;在IOS手机端系统下#xff0c;当对输入框#xff08;input/textarea#xff09;进行focus操作时#xff0c;键盘弹起遮住输入框。
问题描述
从页面底部focus输入框失败从页面中间focus输入框失败
原因
造成上述问题的在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);后言
希望本文会对你有所帮助如果有什么问题可在下方留言沟通
