小程序 input框点击清空数据

yangsitong1314

于 2017-04-21 15:02:02 发布

阅读量866

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/yangsitong1314/article/details/70315464

本文介绍了一个微信小程序中实现表单输入框显示和隐藏清除按钮的方法。通过监听输入框的内容变化来判断是否显示清除图标，并提供点击清除图标后清空输入框内容的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


1、.wxml代码
<form >
    
      <input name="expressCode" type="text" bindinput="show" />
	  
      <image  hidden="{{f}}" form-type="reset" bindtap="hide" src="../../images/delete.png" />

</form>

2、.js代码

Page({
  data: {
  
    f: true
  },
  show: function(e){
    console.log(e.detail.value)
    if(e.detail.value.length>0){
      this.setData({f: false})
    }
  },
  hide: function(){
    this.setData({expressCode:""})
    this.setData({f: true})
  }, 
  })

可以调试了。。。