小程序input框有值时显示清空按钮
时间: 2023-09-03 16:05:59 浏览: 43
您可以通过以下步骤来实现小程序input框有值时显示清空按钮:
1. 在wxml文件中添加一个input框和一个清空按钮,清空按钮默认隐藏。
```
<view class="input-container">
<input class="input" placeholder="请输入内容" bindinput="onInput"/>
<button class="clear-btn" bindtap="onClear" hidden="{{!hasValue}}">清空</button>
</view>
```
2. 在js文件中添加onInput和onClear事件函数,并在onInput事件函数中判断input框的值是否为空,若不为空,则设置hasValue为true,清空按钮显示;否则,设置hasValue为false,清空按钮隐藏。
```
Page({
data: {
hasValue: false
},
onInput: function(e) {
if (e.detail.value !== '') {
this.setData({
hasValue: true
});
} else {
this.setData({
hasValue: false
});
}
},
onClear: function() {
this.setData({
hasValue: false
});
}
})
```
3. 在wxss文件中添加样式,使清空按钮居右显示。
```
.input-container {
display: flex;
align-items: center;
justify-content: space-between;
border: 1rpx solid #ccc;
padding: 10rpx;
}
.input {
flex: 1;
outline: none;
border: none;
}
.clear-btn {
font-size: 28rpx;
color: #333;
background-color: transparent;
}
```
这样,当输入框有值时,清空按钮会显示出来,方便用户清空输入框的内容。