微信小程序 form表单提交点击键盘的完成自动执行

最新推荐文章于 2025-05-19 22:31:01 发布

jjk_2333

最新推荐文章于 2025-05-19 22:31:01 发布

阅读量1.2w

点赞数 1

本文介绍如何利用bindconfirm属性来优化小程序中的表单提交功能。通过具体代码实例展示了如何实现输入框确认操作触发搜索功能，包括输入框的显示与隐藏、清除输入内容等交互细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：使用好bindconfirm属性
<form bindsubmit="searchSubmit" action="">
<view class="weui-search-bar">
<view class="weui-search-bar__form">
<view class="weui-search-bar__box">
<icon class="weui-icon-search_in-box" type="search" size="14"></icon>
<input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" bindconfirm="searchSubmit" focus="{{inputShowed}}" bindinput="inputTyping" />
<view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
<icon type="clear" size="14"></icon>
</view>
</view>
<label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
<icon class="weui-icon-search" type="search" size="14"></icon>
<view class="weui-search-bar__text">搜索</view>
</label>
</view>
<view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
</view>
</form>

js例子：
searchSubmit: function(e) {
console.log('form发生了submit事件，携带数据为：', e.detail.value)
}