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

朴灿烈づ我的快乐病毒、 2022-02-19 12:17 1382阅读 0赞

##### 1. bindinput #####

*  事件是光标移动发生数据改变,不需要手动执行点击 。 数据自动获取
 *  input框内使用属性的方式定义事件名称

*  在js 文件中定义事件方法获取数据
    
     *  其中 `e.detail` 是获取 `input` 数据 其中包含`value`值, `cursor` 是获取光标的位置

getInputValue(e){ 
      console.log(e.detail)// {value: "ff", cursor: 2} 
    }

其他还有三种方法用法一致:![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70]

##### 2. bindsubmit #####

*  携带 form 中的数据触发 submit 事件
 *  bindsubmit 事件需要配合按钮的`formType="submit"` 操作
 *  设置input的name值来获取对应的数据

<form bindsubmit='loginForm'>
      <text class='login-title'>用户登录：</text>
      <input type='text' name='username' placeholder="请输入用户名"></input>
      <input type='password' name='password' placeholder="请输入账号密码"></input>
      <view class='ligin-button'>
        <button formType="submit" type='primary'>点击提交</button>
        <button formType="reset" type='primary'>重置数据表单</button>
      </view>
    </form>

*  在js 中获取数据
    
     *  通过data.detail.value获取数据,获得的是json对象数据键值对一一对应

loginForm: function(data) { 
        console.log(data.detail.value)// {username: "hgj", password: "fsdfsd"}
        var username = data.detail.value.username
        var password = data.detail.value.password;
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70]: /images/20220219/9c16dcc6edab4521a44a0038255147e4.png