zoukankan      html  css  js  c++  java
  • 获取微信小程序的input控件的value

    习惯了vue的方式,我以为javascript世界默认是双向绑定的。可...微信小程序除外,整个文档也没有直接告诉你怎么去获取一个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.

  • 相关阅读:
    非循环单链表节点的操作
    链表每一个节点的数据类型该如何表示
    链表的定义、确定一个链表需要几个参数?
    typedef的用法
    连续存储数组的算法(包含数组倒置、冒泡排序……)
    跨函数使用内存案例
    malloc()动态分配内存概述
    结构体
    指针和数组
    C#基础知识之dnSpy反编译
  • 原文地址:https://www.cnblogs.com/kevin-Y/p/12586626.html
Copyright © 2011-2022 走看看