微信小程序form按钮失效

新手上路,请多包涵

我前面也写了好几个表单应用,都是可以运行的,这个表单不知道咋了,竟点击按钮没放应,控制台没有任何报错,我实在看不出来问题在哪。盼望大神搭救一下

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: #fff;
}

 .itemContainer {
  display: flex;
  background-color: #fff;
  justify-content: space-between;
  border-bottom: 1rpx solid #e5e5e5;
  padding: 10rpx 25rpx;
} 
.itemContainerDetail {
  display: flex;
  background-color: #fff;
  justify-content: space-between;
  /* border-bottom: 1rpx solid #e5e5e5; */
  padding: 10rpx 25rpx;
}
.itemContainerDetailDetail{
  display: flex;
  background-color: #fff;
  /* justify-content: space-between; */
  border-bottom: 1rpx solid #e5e5e5;
  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: #fff;
  background-color:red;
}

js

  formSubmit: function (e) {
    console.log('form发生了submit事件,携带数据为:', e.detail.value)
  },
阅读 6.4k
2 个回答

我竟然出了跟你一样的问题,我试过以下几个测试案例:数字键盘全部替换成text输入,按钮不用固定定位,均没法解决,感觉是微信的bug

新手上路,请多包涵

去掉auto-focus试试,我也遇到这个问题,去掉就可以了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题