首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >微信小程序input框输入值获取

微信小程序input框输入值获取

作者头像
peng_tianyu
发布2022-12-15 17:14:23
发布2022-12-15 17:14:23
5.4K0
举报
文章被收录于专栏:前端开发随记前端开发随记

提交表单时获取输入框的值

wxml

代码语言:javascript
复制
<view>
  <!-- 携带 form 中的数据触发 submit 事件 -->
  <form bindsubmit="submit">
    <input value="{{ age }}" name="age"></input>
    <!-- 
      form-type用于form组件 点击会触发form的submit或reset事件
      合法值:submit 提交表单 reset重置表单
     -->
    <button form-type="submit"></button>
  </form>
</view>

js

代码语言:javascript
复制
Page({
  data: {
    age: ''
  },
  //表单提交时触发
  submit(e) {
    console.log(e.detail.value);
    //e.detail.value获取到的是一个对象 通过每个输入框设置的name属性获取值
    //例如e.detail.value.age
  }
})

实时更新输入框的值

效果图

wxml

代码语言:javascript
复制
<view>{{value}}</view>
<!-- bindinput:键盘输入时触发 -->
<input bindinput="oninput"></input>

js

代码语言:javascript
复制
Page({
  data: {
      value: '默认值'  
  },
  //键盘输入时触发事件
  oninput(e) {
      this.setData({
        value: e.detail.value
      })
  }
})
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-08-21,如有侵权请联系 cloudcommunity@tencent.com 删除
目录
  • 提交表单时获取输入框的值
    • wxml
    • js
  • 实时更新输入框的值
    • 效果图
    • wxml
    • js
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档