四、iOS与Web交互遇到的问题

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