WeChat Mini Programs form button is invalid

I have also written several form applications, all of which can be run. I don"t know what happened to this form, but it didn"t respond when I clicked on the button. There was no error in the console. I really can"t see what the problem is. Look forward to God"s rescue

wxml

<view>
  <form bindsubmit="formSubmit" bindreset="formReset">
    <view class="itemContainer">
      <view class="iconAndText">
        <image class="icons" src="../../images/must_write.png"></image>
        <view class="icon_text"></view>
      </view>
      <view class="placeholderCon">
        <input class="placeholder" placeholder-style="text-align:right" placeholder="" auto-focus/>
      </view>
    </view>
    <view class="itemContainer">
      <view class="iconAndText">
        <image class="icons" src="../../images/must_write.png"></image>
        <view class="icon_text"></view>
      </view>
      <view class="placeholderCon">
        <input type="number" maxlength="11" class="placeholder" placeholder-style="text-align:right" placeholder="" auto-focus/>
      </view>
    </view>
    <view class="itemContainer">
      <view class="iconAndText">
        <image class="icons" src="../../images/must_write.png"></image>
        <view class="icon_text"></view>
      </view>
      <view class="placeholderCon">
        <input class="placeholder" placeholder-style="text-align:right" placeholder="" auto-focus/>
      </view>
    </view>
    <view class="itemContainer">
      <view class="iconAndText">
        <image class="icons" src="../../images/must_write.png"></image>
        <view class="icon_text"></view>
      </view>
      <view class="placeholderCon">
        <input class="placeholder" placeholder-style="text-align:right" placeholder="" auto-focus/>
      </view>
    </view>

    <view class="itemContainer">
      <view class="iconAndText">
        <image class="icons" src="../../images/must_write.png"></image>
        <view class="icon_text"></view>
      </view>
      <view class="placeholderCon">
        <input class="placeholder" placeholder-style="text-align:right" placeholder="" auto-focus/>
      </view>
    </view>

    <view class="itemContainer">
      <view class="iconAndText">
        <image class="icons" src="../../images/must_write.png"></image>
        <view class="icon_text"></view>
      </view>
      <view class="placeholderCon">
        <input class="placeholder" type="number" placeholder-style="text-align:right" placeholder="" auto-focus/>
      </view>
    </view>
    <view class="itemContainerDetail">
      <view class="iconAndTextDetail">
        <image class="icons" src="../../images/must_write.png"></image>
        <view class="icon_text"></view>
      </view>
    </view>
    <view class="itemContainerDetailDetail">
      <view class="DetailDetail">
        <textarea class="placeholderDetail" placeholder-style="text-align:right" placeholder="" name="detail" />
      </view>
    </view>
    <view class="btn-area">
      <button class="sub_but" formType="submit"></button>
    </view>
  </form>
</view>

wxss

.icons {
  width: 30rpx;
  height: 30rpx;
  padding: 15rpx 15rpx 15rpx 15rpx;
}

.grayCon {
  background-color: -sharpfff;
}

 .itemContainer {
  display: flex;
  background-color: -sharpfff;
  justify-content: space-between;
  border-bottom: 1rpx solid -sharpe5e5e5;
  padding: 10rpx 25rpx;
} 
.itemContainerDetail {
  display: flex;
  background-color: -sharpfff;
  justify-content: space-between;
  /* border-bottom: 1rpx solid -sharpe5e5e5; */
  padding: 10rpx 25rpx;
}
.itemContainerDetailDetail{
  display: flex;
  background-color: -sharpfff;
  /* justify-content: space-between; */
  border-bottom: 1rpx solid -sharpe5e5e5;
  padding: 10rpx 25rpx;
  border-radius: 13rpx;
}
 .DetailDetail{
  padding: 30rpx;
} 

.icon_text {
  padding: 15rpx;
  font-size: 33rpx;
}

.iconAndText {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.iconAndTextDetail{
  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */
}
 .placeholderCon{
  display: flex;
  flex-direction: row;
  width: 480rpx;
  align-items: center;
} 
.placeholder {
  font-size: 33rpx;
  width: 480rpx;
}
.placeholderDetail {
  font-size: 33rpx;
  width: 650rpx;
}
.sub_but{
  margin-top: 20rpx;
  width: 80%;
  color: -sharpfff;
  background-color:red;
}

js

  formSubmit: function (e) {
    console.log("formsubmit:", e.detail.value)
  },

I actually have the same problem as you. I have tried the following test cases: the numeric keypad is all replaced by text input, and the buttons don't have to be fixed, so they can't be solved. It feels like Wechat's bug


try to remove auto-focus. I also encountered this problem. Just remove it

.
Menu