1、Web APP 在开发过程中不可避免的涉及到输入,所以今天来解决键盘弹起遮挡的问题
1.1.从iOS原生的方面解决:
// 添加键盘监听
- (void)addNotification {
// 键盘即将出现
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil];
// 键盘出现
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardDidShow:) name:UIKeyboardDidShowNotification object:nil];
// 键盘即将消失
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHide:) name:UIKeyboardWillHideNotification object:nil];
// 键盘消失
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardDidHide:) name:UIKeyboardDidHideNotification object:nil];
}
- (void)keyboardWillShow:(NSNotification *)notification {
[self.webView evaluateJavaScript:@"document.body.scrollTop" completionHandler:nil];
}
- (void)keyboardDidShow:(NSNotification *)notification {
[self.webView evaluateJavaScript:@"document.body.scrollTop" completionHandler:nil];
}
- (void)keyboardWillHide:(NSNotification *)notification {
[self.webView evaluateJavaScript:@"document.body.scrollTop = 0;" completionHandler:nil];
}
- (void)keyboardDidHide:(NSNotification *)notification {
[self.webView evaluateJavaScript:@"document.body.scrollTop" completionHandler:nil];
}
1.2.从Web方面解决(在main.js中):
mounted() {
let myFunction
if (isiOS) {
document.body.addEventListener('focusin', () => { // 软键盘弹起事件
clearTimeout(myFunction)
})
document.body.addEventListener('focusout', () => { // 软键盘关闭事件
clearTimeout(myFunction)
myFunction = setTimeout(function() {
window.scrollTo({top: 0, left: 0, behavior: 'smooth'}) // 当键盘收起的时候让页面回到原始位置
}, 10)
})
}
}
备注:由于很多Web APP引入了FastClick组件,在iOS设备上input标签键盘弹起会不灵敏,需要在main.js