微信小程序文本框有姓名,单位,职务,身份证号,手机号绑定值,点击确认控制台输出信息。代码演示
时间: 2023-10-09 21:07:34 浏览: 55
这里是一个微信小程序文本框的示例代码,包含了姓名、单位、职务、身份证号、手机号五个绑定值。用户在文本框中输入完毕后点击确认按钮,控制台会输出用户的信息。请注意,这里的输出方式只是为了演示方便,实际应用时需要根据需求进行相应的处理。
```
<view class="container">
<view class="form-item">
<text class="label">姓名:</text>
<input class="input" type="text" placeholder="请输入姓名" bindinput="bindNameInput" value="{{name}}"/>
</view>
<view class="form-item">
<text class="label">单位:</text>
<input class="input" type="text" placeholder="请输入单位" bindinput="bindCompanyInput" value="{{company}}"/>
</view>
<view class="form-item">
<text class="label">职务:</text>
<input class="input" type="text" placeholder="请输入职务" bindinput="bindJobInput" value="{{job}}"/>
</view>
<view class="form-item">
<text class="label">身份证号:</text>
<input class="input" type="text" placeholder="请输入身份证号" bindinput="bindIdInput" value="{{id}}"/>
</view>
<view class="form-item">
<text class="label">手机号:</text>
<input class="input" type="text" placeholder="请输入手机号" bindinput="bindPhoneInput" value="{{phone}}"/>
</view>
<view class="form-item">
<button class="btn" type="primary" bindtap="submitForm">确认</button>
</view>
</view>
```
在 js 文件中,我们需要定义五个变量来保存用户输入的信息:
```
data: {
name: '', // 姓名
company: '', // 单位
job: '', // 职务
id: '', // 身份证号
phone: '', // 手机号
}
```
同时,我们还需要编写五个事件处理函数,用于将用户输入的值绑定到相应的变量上:
```
bindNameInput: function (e) {
this.setData({
name: e.detail.value
})
},
bindCompanyInput: function (e) {
this.setData({
company: e.detail.value
})
},
bindJobInput: function (e) {
this.setData({
job: e.detail.value
})
},
bindIdInput: function (e) {
this.setData({
id: e.detail.value
})
},
bindPhoneInput: function (e) {
this.setData({
phone: e.detail.value
})
}
```
最后,我们还需要编写一个点击确认按钮的事件处理函数,用于将用户输入的信息输出到控制台:
```
submitForm: function () {
console.log('姓名:', this.data.name)
console.log('单位:', this.data.company)
console.log('职务:', this.data.job)
console.log('身份证号:', this.data.id)
console.log('手机号:', this.data.phone)
}
```
这样,我们就完成了微信小程序文本框的示例代码。当用户在文本框中输入完毕后点击确认按钮,控制台会输出用户的信息。