微信小程序input使用hold-keyboard保持键盘不收起时，无法通过button提交表单的原因和解决办法（同时也解决了微信小程序键盘会不停收起和弹出的问题）

最近在写微信小程序聊天界面，发现键盘会因为聚焦和失去焦点而弹出和收起，很影响用户体验。于是就找了很多解决方案，其中一种是通过设置hold-keyboard属性来保持键盘不收起。

  
    
       
     
    
      发送
    
  

这样一来键盘虽然不会收起，但也出现了新的问题。此时点击button后表单没提交，当键盘收起以后，才执行了提交的操作。一开始不知道原因是什么，尝试很很多办法，考虑了自动聚焦、父容器挡住等因素，但发现都不是。最后在使用手机调试的过程中发现，在点击输入框以外非键盘区域时，输入框始终保持着聚焦的状态，这时点击提交无效。而当手动收起键盘以后，输入框失去焦点，刚刚未能完成的提交操作自动继续完成。应当是input的聚焦阻止了form-type为submit的button的提交操作。

键盘收起以后（不是点击以后立即执行的），submit提交操作完成后控制台打印如下：

接下来将form-type改为点击事件，改为：

发送

这是再尝试提交就不会出现上述情况了。点击以后立即执行，控制台打印如下：

但与此同时，键盘仍然是聚焦的状态。那么既然两者都是聚焦状态，为什么偏偏前一种情况下无法提交呢？问题就出在form-type为submit上。

在form-type为submit的时候，点击提交的同时也使得input失去焦点。如下图（submit和blur几乎同时触发）：

而在bindtap点击事件的时候，仅仅只是触发了tap绑定的事件函数：

这大概就是原因所在，要想解决这个冲突，大概只能不用submit表单提交的方式获取value值，而是改用bindinput获取，并用点击事件函数进行提交。修改后代码如下：

wxml:

    
       
    
    
      发送
    
  

js:

 /**
   * 获取用户输入内容
   *  */
  getValue(e){
    // console.log(e.detail.value);
    this.setData({
      inputValue:e.detail.value
    })
  },

  /**
   * 提交文字内容
   *  */
  submit(e) {
    var that=this;
    var msg = that.data.inputValue;
    if(msg!==""){
      request({
        url: '地址',
        method: 'POST',
        header: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        data: {
          "message_content": msg,
        },
      })
      .then(res => {
         console.log(res);
         that.setData({
            inputValue:""
         })
       })
    } 
  },

再次调试，这时的input始终保持聚焦，键盘也不会掉下去，提交input输入的内容也没有问题了！以上的分析仅仅是根据自己调试和参考部分网上说法得来的，尚未在官方文档找到相关说明，有误之处，请各位大佬批评指正。