最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

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

程序 crifan 133浏览 0评论
现在已经实现了小程序中的input输入框的功能了:
但是现在想要在输入框input内部的右边加上一个clear close的button,用于点击清除输入:
类似于已有web版中的效果:
小程序 输入框 清除 按钮
小程序自定义组件-可清除的input组件 – 个人文章 – SegmentFault 思否
RaoMeng/TemplateOfHotel: 酒店类微信小程序
微信小程序 清空或修改input值 的方法 – happycxz的博客 – CSDN博客
小程序input 输入框长按 出现默认删除按钮,点击删除按钮微信崩溃 | 微信开放社区
小程序自定义组件可清除的input组件 _Hi小程序
微信小程序 Input框提交后清空 – 简书
被人是用image实现的
自己去找找,记得小程序中有icon的
基础内容 · 小程序
是有要的:
先去显示这个clear的icon
然后去参考:
https://developers.weixin.qq.com/s/LK9tzcmM6QYj
的代码:
先用代码:
<icon type="clear" size="20" />
显示出来清除按钮了:
然后再去想办法看看能否让其在input的内部靠右显示出来
参考:
https://segmentfault.com/a/11900000xxx
-》
RaoMeng/TemplateOfHotel: 酒店类微信小程序
以及自己之前的web版:
去折腾试试
此处基本上实现了要的效果
不过遇到了:
虽然清空了内部的值,但是input显示的值,还存在:
所以要去解决:
小程序 清空 input
清除input输入框的内容,大家有什么方法去实现?-小程序综合区-微信小程序开发社区-微信小程序联盟
把value绑定一个值即可
去试试:
<input>
  value="">
改为:
<input>
  value="{{curInputValue}}">
果然可以:
【总结】
此处用:
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
    })
  },

})
即可实现效果:
输入了点内容:
点击清除按钮后,即可清除内部的值,同时内部的值curInputValue同步到input的value上,input的显示的值也清空了:
且还支持,输入足够长的内容后,右边padding的位置,不会被清除按钮遮盖和重叠:

转载请注明:在路上 » 【已解决】小程序中给input输入框内部右边添加关闭按钮清除输入内容

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
16 queries in 0.078 seconds, using 9.31MB memory