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

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1ea78d4-47c48.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1ea78d4-47c48.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?