获取微信小程序的input控件的value

Posted 生命体验之kevin-Y

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了获取微信小程序的input控件的value相关的知识,希望对你有一定的参考价值。

习惯了vue的方式,我以为javascript世界默认是双向绑定的。可...微信小程序除外,虽然显示值还是value={{jsproperty}}。整个文档也没有直接告诉你怎么去获取一个input的录入值,这几乎是所有文档中仅次于"hello world"的说明了。

如何获取呢?大体上两种办法:

一是利用控件本身的事件,不断的刷新data里的某个属性值,常用是bindinput、bindblur。前者是录入时处理,后者是控件失去焦点时处理。如果每个控件都需要一个绑定的方法,这当然是可怕的。利用bindblur说明一下如何使用一个方法来解决全部控件的绑定吧。

先是js的代码,节选一部分如下:

data: { 
    userinfo: {}, //提交的数据
  },
  // input框输入失去焦点时判断
  inputWatch:function (e) {
    console.log(e.currentTarget);
    let userinfo = this.data.userinfo;
    let item = e.currentTarget.dataset.name;
    userinfo[item] = e.detail.value;
    this.setData({
      userinfo
    });
    console.log(‘userinfo‘, userinfo)
  },

  wxml中需要绑定事件,定义dataset,加上value显示的设置

<input class="weui-input"  bindblur="inputWatch" data-name=‘userphone‘ value="{{userinfo.userphone}}" placeholder="请输入联系电话" />

  有没有一种很累的感觉。

第二种办法是使用form来获取录入的值,wxml需要指定name,比上面稍省一点

    <form bindsubmit=‘onNext‘>
        <input class="weui-input"  name="userphone"  value="{{userinfo.userphone}}" placeholder="请输入联系电话" />
        <button class="weui-btn" formType="submit" type=‘primary‘>下一步</button>
   </form>

  以下是js文件的onNext方法

onNext:function(data){    
     //暂存当前表单信息
     console.log(data.detail.value.userphone)     
},

  

以上两种办法不能混合使用。原因是inputWatch调用了setData,而没有绑定事件的控件的值还没有提交到userinfo.

 

以上是关于获取微信小程序的input控件的value的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序获取输入框(input)内容

微信小程序获取input值的两种常用方式

微信小程序中的input控件怎么实现自动换行

微信小程序中使用vant-weapp中时间控件默认显示每月1号

微信小程序弹窗下输入框点击还会获取焦点

微信小程序判断input是否为空