微信小程序—如何获取用户输入文本框的值

<view class="itemView">用户名：

<input class="input" name="userName" placeholder="请输入用户名"

bindinput ="userNameInput"/>

</view>

<view class="itemView">密码：

<input class="input" password placeholder="请输入密码"

bindinput="passWdInput" />

</view>

<view class="viewName" style="background-color:#fbf9fe">

<button class="loginBtn" bindtap="loginBtnClick">登录</button>

</view>

Page({

data: {

userName: '',

userPwd:""

}, //获取用户输入的用户名

userNameInput:function(e) {

this.setData({

userName: e.detail.value

})

},

passWdInput:function(e)

输入的密码

loginBtnClick: function (e) {

console.log("用户名："+this.data.userName+" 密码：" +this.data.userPwd)

}

, // 用户点击右上角分享

onShareAppMessage: function () {

}

})

最近在研究小程序云开发，想做一个在搜索框输入姓名，然后返回该姓名的相关信息，当然程序不可能一触而就，首先得把大项目分解为小项目，逐一破解。

入正题

首先得有一个搜索框和按钮

wxml文件

wxml文件

input的四种属性，我选择了第二种属性，键盘触发时自动获取输入框内容

js文件

小程序给了个例子

能够获取用户输入的组件，需要使用组件的属性bindblur将用户的输入内容同步到 AppService。

<input id="myInput" bindblur="bindBlur" />

var inputContent = {}

Page({

data: {

inputContent: {}

},

bindBlur: function(e) {

inputContent[e.currentTarget.id] = e.detail.value

}

})

---