html 输入框添加清空按钮,【已解决】小程序中给input输入框内部右边添加关闭按钮清除输入内容...

现在已经实现了小程序中的input输入框的功能了：

但是现在想要在输入框input内部的右边加上一个clear close的button，用于点击清除输入：

类似于已有web版中的效果：

小程序 输入框 清除 按钮

被人是用image实现的

自己去找找，记得小程序中有icon的

是有要的：

先去显示这个clear的icon

然后去参考：

的代码：

先用代码：

显示出来清除按钮了：

然后再去想办法看看能否让其在input的内部靠右显示出来

参考：

-》

以及自己之前的web版：

去折腾试试

此处基本上实现了要的效果

不过遇到了：

虽然清空了内部的值，但是input显示的值，还存在：

所以要去解决：

小程序 清空 input

把value绑定一个值即可

去试试：

value="">

改为：

value="{{curInputValue}}">

果然可以：

【总结】

此处用：

pages/index/index.wxml

id="queryInput"

bindinput='inputCallback'

bindconfirm="inputConfirmCallback"

type="text"

placeholder="请输入要查询的英文绘本名称"

value="{{curInputValue}}">

class="clear_button"

type="clear"

size="18"

bindtap='clearInput'

/>

查询

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.jsPage({

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

})

},

})

即可实现效果：

输入了点内容：

点击清除按钮后，即可清除内部的值，同时内部的值curInputValue同步到input的value上，input的显示的值也清空了：

且还支持，输入足够长的内容后，右边padding的位置，不会被清除按钮遮盖和重叠：