微信小程序监听 input 的输入值

最新推荐文章于 2025-05-21 03:38:26 发布

原创最新推荐文章于 2025-05-21 03:38:26 发布 · 6.5k 阅读

4 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个使用WXML和JS实现的简单搜索功能案例。通过wxml中的输入框组件与js文件中定义的数据及事件处理函数相结合，实现了搜索内容的实时更新。该案例适合初学者学习小程序开发中的数据绑定和事件处理。

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

wxml

      <view class='search_input'>
        <input value='{{search}}' placeholder='搜索整改说明...' bindblur='changeSearch' bindconfirm='changeSearch' bindinput='changeSearch'></input>
      </view>

/**
   * 页面的初始数据
   */
  data: {
    search: ''
  }

  /**
   * 监听搜索内容
   */
  changeSearch: function(event) {
    let that = this;
    var inputSearch = event.detail.value;
    that.setData({
      search: inputSearch
    })
  }