现在已经实现了小程序中的input输入框的功能了:
但是现在想要在输入框input内部的右边加上一个clear close的button,用于点击清除输入:
![](https://www.crifan.com/files/pic/uploads/2021/03/efc64a745c65406c97f88f23d346bf31.jpg)
类似于已有web版中的效果:
![](https://www.crifan.com/files/pic/uploads/2021/03/39f8b2146cd64ca6b807a783a9b2d78b.jpg)
小程序 输入框 清除 按钮
被人是用image实现的
自己去找找,记得小程序中有icon的
是有要的:
![](https://www.crifan.com/files/pic/uploads/2021/03/8d840684aabd441886d2abddf7e873e7.jpg)
先去显示这个clear的icon
然后去参考:
的代码:
![](https://www.crifan.com/files/pic/uploads/2021/03/2bfc2647cd84440eafb7b5d4a9b0717b.jpg)
先用代码:
<icon type="clear" size="20" />
显示出来清除按钮了:
![](https://www.crifan.com/files/pic/uploads/2021/03/9baacc842f4c428f953f7443312004cd.jpg)
然后再去想办法看看能否让其在input的内部靠右显示出来
参考:
-》
![](https://www.crifan.com/files/pic/uploads/2021/03/883bd3f9c9734ba09d5a3649e78dab10.jpg)
以及自己之前的web版:
![](https://www.crifan.com/files/pic/uploads/2021/03/ab6e942680e54461adf38af40eed232d.jpg)
去折腾试试
此处基本上实现了要的效果
不过遇到了:
虽然清空了内部的值,但是input显示的值,还存在:
![](https://www.crifan.com/files/pic/uploads/2021/03/b136f580acd94ed88542b693c28618f9.jpg)
![](https://www.crifan.com/files/pic/uploads/2021/03/238ad7cf269a4c9cb0fecf7e899d95f0.jpg)
所以要去解决:
小程序 清空 input
把value绑定一个值即可
去试试:
<input> value="">
改为:
<input> value="{{curInputValue}}">
果然可以:
![](https://www.crifan.com/files/pic/uploads/2021/03/d9ae983b97ef421db4b6659a602e11f6.jpg)
【总结】
此处用:
pages/index/index.wxml
<input id="queryInput" bindinput='inputCallback' bindconfirm="inputConfirmCallback" type="text" placeholder="请输入要查询的英文绘本名称" value="{{curInputValue}}"> <view class='clear_input {{isShowClear ? "show_clear" : "hide_clear"}}'> <icon class="clear_button" type="clear" size="18" bindtap='clearInput' /> </view> </input> <button id="queryButton" bindtap="submitQuery">查询</button> </view>
pages/index/index.wxss
.input_and_query{ height: 28px; vertical-align: center; margin-bottom: 44px; display: flex; width: 100%; } #queryInput{ font-size: 13px; border-radius: 16px; border: 1px solid #ced4da; margin-left: 39px; /* flex:0 0 80%; */ /* flex-grow: 4; */ flex: 1 1 70%; /* text-indent: 8px; */ padding-left: 8px; padding-right: 28px; position: relative; } .clear_input{ align-items: center; justify-content: center; right: 6px; position: absolute; bottom: 4px; z-index: 10; } .show_clear{ display: flex; } .hide_clear{ display: none; } .clear_button{ }
pages/index/index.js
Page({ data: { curInputValue: "", isShowClear: false, }, //事件处理函数 inputCallback: function (e) { console.log("inputCallback: e=%o", e) this.setData({ curInputValue: e.detail.value }) console.log("curInputValue=%s", this.data.curInputValue) var isShowClear = false if (this.data.curInputValue){ isShowClear = true } else { isShowClear = false } this.setData({ isShowClear: isShowClear }) }, clearInput: function (e) { console.log("clearInput: e=%o", e) this.setData({ curInputValue: "", isShowClear: false }) }, })
即可实现效果:
![](https://www.crifan.com/files/pic/uploads/2021/03/23f2f740a8784e04ae7295686db1bac1.jpg)
输入了点内容:
![](https://www.crifan.com/files/pic/uploads/2021/03/b4482efbfbfd4f7b808ee0a79e169ad6.jpg)
点击清除按钮后,即可清除内部的值,同时内部的值curInputValue同步到input的value上,input的显示的值也清空了:
![](https://www.crifan.com/files/pic/uploads/2021/03/a44ec4cfff4549418813109170aed8af.jpg)
且还支持,输入足够长的内容后,右边padding的位置,不会被清除按钮遮盖和重叠:
![](https://www.crifan.com/files/pic/uploads/2021/03/c235683ecf254bfc8602e9e6a60a9343.jpg)