微信小程序form表单的bindsubmit不生效bug

最新推荐文章于 2025-03-27 23:01:40 发布

原创最新推荐文章于 2025-03-27 23:01:40 发布 · 6.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #form

微信小程序专栏收录该内容

1 篇文章

订阅专栏

博客聚焦微信小程序form标签，当使用bindsubmit属性获取事件时遇到问题。背景是提交form表单时想获取用户formId，原因是form子标签中超过1个input标签有auto - focus属性，解决方案是只留一个或全部删除该属性。

微信小程序form标签，bindsubmit属性获取不到事件，问题及原因如下：

背景：

想在form表单提交的时候获取一个用户的formId。（其他场景也适用，只是我是在这个时候遇到的）

原因：

form标签的子标签中，存在input标签，有超过1个input标签存在auto-focus属性，就会导致获取不到。
举例如下：

<form bindsubmit="onClickApply" report-submit='true'>
      <view class="row">
              <input placeholder="请输入" auto-focus/>
              <input placeholder="请输入" auto-focus/>
      </view>
      <button class="apply" form-type="submit">申请</button>
</form>

解决方案：

将子标签中auto-focus属性只留下一个，或者全部删除（根据业务）。

<form bindsubmit="onClickApply" report-submit='true'>
      <view class="row">
              <input placeholder="请输入" auto-focus/>
              <input placeholder="请输入"/> // 删除一个
      </view>
      <button class="apply" form-type="submit">申请</button>
</form>