Loading

微信小程序自定义showModel后怎么获取获取input框输入值

先看下效果

自己调样式太好玩了哈哈哈

参考官方文档

用官方的直接copy过来就可以实现

https://developers.weixin.qq.com/miniprogram/dev/component/input.html

wxml

需要在要获取数据的输入框绑定bindinput ,绑定后需要在js上定义一个函数

  <show-Model show="{{hiddenmodalput}}" title="修改资料" confirm-text="提交" cancel-text="取消" bindcancel="quxiao" bindconfirm="tijiao">
            <input bindinput='inputBtn' style="text-align: center;" type='text'  placeholder="请输入要修改的昵称..." auto-focus />
  </show-Model>

js

在定义函数后,可在inputBtn监听到你输入的数据

Page({
  data: {
    inputNickname: "",

  }
  //取消按钮
  quxiao: function (e) {
    this.setData({
      hiddenmodalput: false,
    })
  },
  //提交按钮
  tijiao: function (e) {
    let that = this
    console.log("昵称:" + that.data.inputNickname);
  },
  inputBtn(e) {
    console.log("e{}==========>" + JSON.stringify(e.detail.value))
    this.setData({
      inputNickname: e.detail.value
    })
  },
posted @ 2022-11-10 15:24  Rzk  阅读(346)  评论(0编辑  收藏  举报