微信小程序之获取input标签的值

获取微信小程序中input中的数据

<scroll-view>
<view id='titleView'>
<text id="titleText">登录</text>
</view>
<view id='mainView'>
<text>用户名</text>
<input class='input' bindinput='usernameInput'></input>
<text>密码</text>
<input class='input' bindinput='passwordInput'></input>
<button class="btn" bindtap='login'>登录</button>
<button class='btn' bindtap='toRegister'>注册</button>
</view>
</scroll-view>

登录的js页面

var app=getApp();
Page({
login:function(e){
<!--拼接url通过后台验证跳转
this.data.username获取标签中值-->
  var url = app.globalData.serverIp +"/user/login.html?"
  +"username="+this.data.username
  +"&password="+this.data.password;
  <!--为this赋值给全局对方法中调用-->
  var page=this;
  <!--用request进行后台传输-->
  wx.request({
    url: url,
    success:function(response){
      var serverData=response.data;
      var status=serverData.status;
      var msg="登录失败";
      if(status==200){
        msg="登录成功";
        //跳转商场首页navigateTo
        wx.navigateTo({
          url:"../storeindex/storeindex",
        })
         //把username保存到手机上
        //sync表示同步 setStorageSync函数的作用是同步保存数据相当于http中的cookie
        wx.setStorageSync("username", page.data.username);
      }
      wx.showToast({
        title: msg
      })
    },
    fail:function(e){
      console.log("联网失败");
      console.log(e);
    },
    
data: {
    username:"",
    password:""
  },
  usernameInput:function(e){
    this.data.username=e.detail.value;
  },
  passwordInput: function (e) {
    this.data.password = e.detail.value;
  },
  })
},
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序中,input标签是一个常用的元素,用于用户信息的录入和查询操作等。你可以通过以下几个常用事件来熟练地使用input标签: 1. input获取焦点事件(bindfocus):当input获取焦点时触发该事件。你可以在事件处理函数中进行相应的操作。例如,你可以使用bindfocus来监听input框的焦点事件,并在事件处理函数中打印出用户输入的。示例代码如下: ``` <input type="text" bindfocus="_bindfocus" /> ``` ``` _bindfocus(e) { console.log(e.detail.value); // 实时获取用户输入 } ``` 2. input框失去焦点事件(bindblur):当input框失去焦点时触发该事件。你可以在事件处理函数中对用户输入的进行保存、判断或其他操作。例如,你可以使用bindblur来监听input框的失去焦点事件,并在事件处理函数中获取input输入框的。示例代码如下: ``` <input type="text" bindblur="_bindblur" /> ``` ``` _bindblur(e) { console.log(e.detail.value); // 获取input输入框的 } ``` 3. input框输入事件(bindinput):当input框的发生变化时触发该事件。你可以在事件处理函数中实时获取用户输入的,并进行相应的操作。例如,你可以使用bindinput来监听input框的输入事件,并在事件处理函数中打印出用户输入的。示例代码如下: ``` <input type="text" bindinput="_bindinput" /> ``` ``` _bindinput(e) { console.log(e.detail.value); // 实时获取用户输入 } ``` 通过熟练使用这些事件,你可以更好地处理input标签微信小程序中的使用。希望这些信息对你有帮助!\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* *3* [微信小程序input标签详解](https://blog.csdn.net/ct5211314/article/details/120132077)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值