微信小程序点击取消清空文本框
时间: 2023-07-06 08:27:32 浏览: 155
微信小程序学习用demo:LOOK:点击tabbar变换图标
您可以在微信小程序中使用以下代码来实现点击取消按钮清空文本框的功能:
```javascript
// 在wxml中添加以下代码
<view class="input-container">
<input class="input" placeholder="请输入内容" bindinput="onInput" value="{{inputValue}}"/>
<button class="cancel-btn" catchtap="onCancel">取消</button>
</view>
// 在js文件中添加以下代码
Page({
data: {
inputValue: ''
},
onInput: function(e) {
this.setData({
inputValue: e.detail.value
})
},
onCancel: function() {
this.setData({
inputValue: ''
})
}
})
```
在这段代码中,我们首先在wxml文件中添加了一个文本框和一个取消按钮,分别绑定了onInput和onCancel两个事件。在js文件中,我们使用setData方法来实时更新文本框中的值,并在点击取消按钮时将文本框中的值清空。
阅读全文