前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序input框输入值获取

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

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

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

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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 提交表单时获取输入框的值
    • wxml
      • js
        • 效果图
    • 实时更新输入框的值
      • wxml
        • js
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档