微信小程序——如何获取到输入框的值

在微信小程序中,可以通过以下几种方式来获取输入框的值:

  1. 使用 bindinput 绑定输入事件,通过 event.detail.value 获取输入框的值。具体操作如下:
html 复制代码
<input bindinput="onInput" placeholder="请输入内容"></input>
javascript 复制代码
Page({
  onInput: function(event) {
    var value = event.detail.value;
    console.log(value);
  }
})
  1. 使用双向数据绑定,在 input 组件中使用 value 属性绑定一个变量,然后通过 this.data.variableName 获取输入框的值。具体操作如下:
html 复制代码
<input value="{{inputValue}}" bindinput="onInput"></input>
javascript 复制代码
Page({
  data: {
    inputValue: ''
  },
  onInput: function(event) {
    this.setData({
      inputValue: event.detail.value
    });
    console.log(this.data.inputValue);
  }
})

通过以上两种方式,你可以获取到输入框的值,并进行后续的处理。

相关推荐
Brave & Real12 小时前
小程序 const 在js中以及与同类的var和let之间的差异
javascript·微信小程序·小程序
Joolun商城源码_Java14 小时前
JooLun Pro旗舰版SaaS多租户商城:商城小程序与店铺小程序的功能区别详解
小程序
0的0次方14 小时前
从0到1:如何运营一款支付宝证件照小程序(含避坑指南)
小程序·新媒体运营
小郑加油16 小时前
第16天:综合训练——数据去重
小程序
海兰19 小时前
【小程序】 贪吃蛇(Next.js+WebSocket+SQLite + Prisma ORM)
javascript·websocket·小程序
路光.20 小时前
uniapp小程序/App使用webview打通麦克风权限实现录音功能
小程序·uni-app·app
hnxaoli21 小时前
统信小程序(十四)支持拖拽的旋图程序
python·小程序
2501_9151063221 小时前
深入解析HTTPS抓包原理、中间人攻击及反抓包技术攻防
数据库·网络协议·ios·小程序·https·uni-app·iphone
silvia_Anne1 天前
微信小程序商品列表
微信小程序·小程序
游戏开发爱好者81 天前
React Grab工具详解:AI助力Vue3、Svelte和Solid前端元素调试
android·ios·小程序·https·uni-app·iphone·webview