聚焦表单输入框时，实现屏幕高度增加并上移的效果

关于输入框被键盘遮挡，上移输入框操作

业务场景：h5输入表单页面高度为屏幕高度，当表单栏较长时（如超过3-4个），下面的表单容易被键盘遮挡，无法直接切换聚焦和可见输入

解决方案：

​ 现有情况：表单高度为屏幕高度，键盘为浮动在页面上（此为组件键盘，非系统键盘）

​ 第一步：聚焦时，实现屏幕高度增加

​ 第二步：实现屏幕上移动（移动距离为屏幕高度增加的距离）

​ 第三步： 实现聚焦失焦时，屏幕高度的切换（聚焦时增加高度，失焦时回到屏幕高度）

实现的效果：

1. 第一步：聚焦时，实现屏幕高度增加

   （1）在mouted阶段，先用data中的一个变量clientHeigh存储设备屏幕高度

    mounted() {
    		this.clientHeight = document.documentElement.clientHeight;
    },
   

   （2）在methods方法中，定义一个改变屏幕高度的方法

   ​ 需要现在该页面的根节点上ref=“bindingCard”，后面通过ref增加样式高度

   	changeHeight(valueHeight) {
   		*// 当屏幕高度小于等于2000时候，修改屏幕高度*
   ​		// 这里还考虑到了屏幕高度，小于某个高度才实现屏幕高度增加，否则不增加
   ​    if (this.clientHeight <= 2000 {
   ​    		this.$refs.bindingCard.style.height = valueHeight + 'px';
   ​  	}
   },
   

2. 第二步：实现屏幕上移动（移动距离为屏幕高度增加的距离）

   *// 聚焦时，实现移动屏幕到某个高度* （valueDistance为移动的距离）
   ​ moveHeight(valueDistance) {
   ​	// 移动前，先增加需要移动的距离给屏幕高度
   ​ 	this.changeHeight(this.clientHeight + valueDistance);
   ​	// 实现移动
   ​    window.scrollTo(0, valueDistance);
   ​ },
   

3. 第三步： 实现聚焦失焦时，屏幕高度的切换（聚焦时增加高度，失焦时回到屏幕高度）

   （1）实现聚焦时增加高度并移动屏幕距离，如在手机号和验证码聚焦函数中，添加移动函数

   focusPhone() {
   ​  	this.moveHeight(150);
   ​},
   focusVerificode() {
   ​    this.moveHeight(150);
   ​},
   

   （2）实现失焦时回到屏幕高度，如在手机号和验证码失焦函数中，添加改变屏幕高度函数

    checkPhone() {
   ​    this.changeHeight(this.clientHeight);
   ​ },
   ​checkVerificode() {
   ​    this.changeHeight(this.clientHeight);
   ​ },
   

   （3）你以为这样就可以实现了吗？然而并没有，因为一个表单聚焦到另一个表单聚焦时，并没有先失焦再聚焦，而是先聚焦再失焦，如：手机号聚焦，点击验证码聚焦，第一步：手机号聚焦，第二步：验证码聚焦，第三步：手机号失焦

   ​ 这就导致聚焦手机和验证码是增加屏幕高度，但是失焦手机时又回到原屏幕高度，这并不是我们想要的效果，我们想要的是切换聚焦手机和验证码时都增加屏幕高度，不需要回到原屏幕高度。

   ​ 这个时候就需要记录中间那一步，用一个开关记录手机和验证码是否聚焦，若他们聚焦了，则第三步失焦不执行回到屏幕高度，综上所述，则完整的代码如下：

   ​ data中定义两个开关参数：

   	switchFocusPhone: false,
   	switchFocusVerificode: false,
   

   聚焦失焦函数完整代码如下：

    focusPhone() {
   ​ *// 设置手机号和验证码聚焦开关*
   ​  	this.switchFocusPhone = true;
   ​     this.switchFocusVerificode = false;
   ​     this.moveHeight(150);
   ​ },
   
   ​ checkPhone() {
   ​  *// 手机号失焦时先聚焦到验证码则保持原高度，否则回到应用高度*
   ​   if (!this.switchFocusVerificode) {
   ​       this.changeHeight(this.clientHeight);
   ​    }
   ​ },
   
   ​ focusVerificode() {
   ​   *// 设置手机号和验证码聚焦开关*
   ​   this.switchFocusVerificode = true;
   ​   this.switchFocusPhone = false;
   ​   this.moveHeight(150);
   ​ },
   
    checkVerificode() {
     *// 验证码失焦时先聚焦到手机号则保持原高度，否则回到应用高度*
   ​   if (!this.switchFocusPhone) {
   ​      this.changeHeight(this.clientHeight);
   ​   }
   ​ },
   

   至此，我们就完成了聚焦表单时，屏幕高度增加并上移的效果