【微信小程序】获得用户input内容的方法

最新推荐文章于 2024-04-27 16:51:43 发布

刺猬学会了

最新推荐文章于 2024-04-27 16:51:43 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/sinat_34880701/article/details/77773638

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

3 篇文章

订阅专栏

本文介绍了在微信小程序中实现搜索框的两种方法。第一种方法使用Page对象的data属性直接管理输入状态，并通过SearchClick事件处理搜索逻辑。第二种方法则采用独立的对象来存储输入的内容，再由SearchClick事件读取该对象的状态来执行搜索操作。两种方式均包含了输入监听及导航到搜索结果页面的功能。

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

<!--search.wxml-->
<input id="search_input" focus="true" bindinput="bindinput" confirm-type="search" bindconfirm="SearchClick" ></input>

// search.js 方法一
Page({
  data: {
    inputValue:'',
  },
  /*
  bindinput: function (e) {
    this.setData({
      inputValue : e.detail.value
    })
  },
  */
  /*
  bindinput是在聚焦的时候就会触发，与bindchange注意区别,这里我用的SearchClick事件，方法一样。
  */

  SearchClick: function (e) {
    this.setData({
      inputValue: e.detail.value
    })  

    var inputValue = this.data.inputValue;

     if (inputValue) {
      console.log('inputValue=',inputValue)
      wx.navigateTo({
        url: '../search/result/result'
      })
    } else {
      console.log('inputValue=', inputValue)
      wx.showModal({
        title: '提示',
        content: '请输入关键字进行搜索',
        showCancel: false
      })
    }    
  },
})

// search.js 方法二
var inputContent = {};
Page({
  data: {
    inputContent: {}
  },

  bindinput: function (e) {
    inputContent[e.currentTarget.id] = e.detail.value
  },

  SearchClick: function () {
    var inputValue = inputContent.search_input;
    if (inputValue) {
      console.log('inputValue=',inputValue)
      wx.navigateTo({
        url: '../search/result/result'
      })
    } else {
      console.log('inputValue=', inputValue)
      wx.showModal({
        title: '提示',
        content: '请输入关键字进行搜索',
        showCancel: false
      })
    }

  },
})