弹窗关闭时,自动唤醒焦点，解决因校验失败自动关闭问题

在项目进行当中，遇到了一件不太常见的小问题，分享给大家。最近我负责了一个功能的修改，这个功能的修改要用到小程序弹窗组件van-dialog，具体的使用，我就不在这里赘述了，大家可以自行了解一下。简单来说，这个弹窗中有一个表单，用户点击确定后，需要先对表单进行校验，如果校验失败，则需要阻止弹窗关闭，否则会直接提交表单，提交不合法数据。

但是，我们尝试之后发现，即使阻止了弹窗关闭，但是键盘还是会自动被唤醒，继续进行表单的填写。我们分析了一下原因，这是因为form标签如果焦点在里面的时候，就会被唤醒键盘，虽然我们阻止了弹窗关闭，但是焦点还是在form标签里面，所以键盘被唤醒了。

既然知道了原因，那么解决办法也很简单，让focus不在form里面就可以了。我们可以利用setTimeout，稍微延迟一点，自动将焦点移到页面最上面，这样就可以解决问题了。

const showDialog = () => {
  wx.showModal({
    title: '提示',
    content: '请填写表单',
    showCancel: false,
    success: (res) => {
      if (res.confirm) {
        // 此处为表单校验
        if (checkForm()) {
          // 表单校验通过
          // 此处为表单提交逻辑
          submitForm();
        } else {
          // 表单校验失败
          // 阻止弹窗关闭
          wx.hideLoading();
          setTimeout(() => {
            // 将焦点移到页面最上面
            wx.pageScrollTo({
              scrollTop: 0,
              duration: 0,
            });
          }, 10);
        }
      }
    },
  });
};

需要注意的是，一定要保证在调起showMoadl方法时，当前页面元素中是有id为app的元素，同时要保证页面元素中含有键盘input输入框，因为页面首行需要自动获取焦点，如果此时，input框不在首行，则无法自动获取焦点，键盘依然会被唤醒。