最新消息:20210917 已从crifan.com换到crifan.org

【已解决】小程序中如何在按钮点击中获取input输出的值

程序 crifan 726浏览 0评论
折腾:
【未解决】小程序中点击按钮调用服务器接口返回数据
期间,需要先去搞清楚,如何在点击按钮时,获取input输出的值:
表单组件 · 小程序
<button id="queryButton" bindtap="submitQuery">查询</button>

  //事件处理函数
  submitQuery: function () {
    console.log("submitQuery")
  },
支持点击了:
但是需要去获取当前input中输出的值
小程序 获取input值
微信小程序获取input输入框的值 – stromGui同视 – CSDN博客
e.detail.value.username ?
但是此处不是点击input啊
可以直接获取?
微信小程序获取input值的方法 – Charles_Tian的博客 – CSDN博客
微信小程序获取input输入框的值 – 简书
用:e.detail.value是因为:在form表单中才行
form · 小程序
果然是的:
  formSubmit: function(e) {
    console.log('form发生了submit事件,携带数据为:', e.detail.value)
  },
小白简单demo:简单的input输入值的获取和传递-微信小程序俱乐部 www.wxappclub.com
http://www.wxappclub.com/topic/742
当input值变化,去存起来,后续再调用的
才看到,和官网的:
input · 小程序
是一致的
用代码:
    <input
      id="queryInput"
      bindinput='inputCallback'
      bindconfirm="inputConfirmCallback"
      type="text"
      placeholder="请输入要查询的英文绘本名称"
      value="">
    </input>
js:
Page({
  data: {
    curInputValue: "",

    motto: '绘本查询精灵',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  inputCallback: function (e) {
    console.log("inputCallback: e=%o", e)

    this.setData({
      curInputValue: e.detail.value
    })

    console.log("curInputValue=%s", this.data.curInputValue)
  },
  inputConfirmCallback: function (e) {
    console.log("inputConfirmCallback: e=%o", e)

    this.submitQuery()
  },
  submitQuery: function () {
    console.log("submitQuery")

    console.log("before submit: curInputValue=%s", this.data.curInputValue)
  },
可以实现输入和回车触发confirm了:
On app route: pages/index/index
WAService.js:18 Update view with init data
WAService.js:18 pages/index/index: onLoad have been invoked
WAService.js:18 pages/index/index: onShow have been invoked
WAService.js:18 Invoke event onReady in page: pages/index/index
WAService.js:18 pages/index/index: onReady have been invoked
WAService.js:18 Invoke event inputCallback in page: pages/index/index
index.js? [sm]:16 inputCallback: e=Object
index.js? [sm]:22 curInputValue=b
WAService.js:18 Invoke event inputCallback in page: pages/index/index
index.js? [sm]:16 inputCallback: e=Object
index.js? [sm]:22 curInputValue=bo
WAService.js:18 Invoke event inputCallback in page: pages/index/index
index.js? [sm]:16 inputCallback: e=Object
index.js? [sm]:22 curInputValue=boo
WAService.js:18 Invoke event inputCallback in page: pages/index/index
index.js? [sm]:16 inputCallback: e=Object
index.js? [sm]:22 curInputValue=book
WAService.js:18 Invoke event submitQuery in page: pages/index/index
index.js? [sm]:30 submitQuery
index.js? [sm]:32 before submit: curInputValue=book
WAService.js:18 Invoke event inputCallback in page: pages/index/index
index.js? [sm]:16 inputCallback: e=Object
index.js? [sm]:22 curInputValue=boo
WAService.js:18 Invoke event inputConfirmCallback in page: pages/index/index
index.js? [sm]:25 inputConfirmCallback: e=Object
index.js? [sm]:30 submitQuery
index.js? [sm]:32 before submit: curInputValue=boo
【总结】
对于代码:
index.wxml
    <input
      id="queryInput"
      bindinput='inputCallback'
      bindconfirm="inputConfirmCallback"
      type="text"
      placeholder="请输入要查询的英文绘本名称"
      value="">
    </input>

    <button id="queryButton" bindtap="submitQuery">查询</button>
以及index.js:
//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    curInputValue: "",
  },
  //事件处理函数
  inputCallback: function (e) {
    console.log("inputCallback: e=%o", e)

    this.setData({
      curInputValue: e.detail.value
    })

    console.log("curInputValue=%s", this.data.curInputValue)
  },
  inputConfirmCallback: function (e) {
    console.log("inputConfirmCallback: e=%o", e)

    this.submitQuery()
  },
  submitQuery: function () {
    console.log("submitQuery")

    console.log("before submit: curInputValue=%s", this.data.curInputValue)
  },

})
可以实现:
  • 当input输入地址发生变化时,bindinput触发inputCallback,更新最新的值到this.data.curInputValue
  • 然后当点击按钮时触发submitQuery,去获取到最新的input的值:this.data.curInputValue
  • 另外顺带加上:当键盘中回车,完成时,触发:inputConfirmCallback

转载请注明:在路上 » 【已解决】小程序中如何在按钮点击中获取input输出的值

发表我的评论
取消评论

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
90 queries in 0.171 seconds, using 23.36MB memory