在 iOS 的项目中,经常会遇到内嵌网页的场景,而网页内的输入框也比较常见。一般来说,键盘的弹起事件和防止遮挡输入框是由前端同学处理的,但可能因为种种原因,这个锅可能甩到我们 iOS 工程师身上。
锅从天而降,不接也没法。那就逆向思维,分析一下具体的实现思路吧:
期望结果: 键盘弹出后,webView 需要上移某一个距离,保证不遮挡输入框。(如何获取正确的距离?)
↓
获取距离: 计算输入框距离屏幕底部和键盘高度之间的差值。(输入框在 WebView 中,如何获取?)
↓
获取输入框的位置: 给视图添加一个全屏的点击手势,点击输入框的时候,通过坐标转换,计算出相对屏幕的点击坐标。(但点击位置并不一定是输入框的底部,所以键盘弹出后依然会遮住一部分输入框,获取 WebView 输入框的高度即可)
↓
获取输入框的高度: 通过注入一段获取输入框高度的 JS 代码,来尝试获取 input 元素的高度。
有了方案,就开始动手吧…
一、基础准备
添加点击手势 ,监听系统键盘弹出事件, 并禁调 WebView 键盘弹出事件。
- (void)loadView{
[super loadView];
UITapGestureRecognizer *webTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(webTap:)];
webTap.delegate = self;
webTap.cancelsTouchesInView = NO;
[self.view addGestureRecognizer:webTap];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHide:) name:UIKeyboardWillHideNotification object:nil];
}
#pragma mark - UIGestureRecognizerDelegate
//允许多个手势识别器共同识别
-(BOOL)gestureRecognizer:(UIGestureRecognizer *