在微信小程序中,`input` 标签用于创建文本输入框,并支持多种属性和事件,以便实现不同的功能。以下是一些常用的属性和事件:
基本属性
`type`:设置输入框的类型,如 `text`(默认)、`number`、`idcard`、`digit`、`time`、`date` 等。
`password`:设置为 `true` 时,输入框显示为密码框。
`placeholder`:设置输入框为空时的占位符文本。
`placeholder-style`:设置占位符的样式。
`placeholder-class`:设置占位符的样式类。
`disabled`:设置为 `true` 时,输入框不可用。
`maxlength`:设置输入框的最大输入长度,设置为0时不限长度。
`auto-focus`:设置为 `true` 时,输入框自动获取焦点并拉起键盘。
`focus`:设置为 `true` 时,输入框获取焦点。
事件
`bindinput`:当输入框内容发生变化时触发,事件对象包含 `detail`,其中 `value` 是输入框的当前值。
`bindchange`:当输入框失去焦点时触发,事件对象包含 `detail`,其中 `value` 是输入框的当前值。
`bindsubmit`:当表单提交时触发,事件对象包含表单数据。
示例代码
wxml:
```xml
```
js:
```javascript
Page({
data: {
username: '',
password: ''
},
onUsernameInput(e) {
this.setData({
username: e.detail.value
});
},
onPasswordInput(e) {
this.setData({
password: e.detail.value
});
},
onSubmit() {
console.log('用户名:', this.data.username);
console.log('密码:', this.data.password);
}
});
```
建议
在使用 `input` 标签时,建议为每个输入框设置唯一的 `id`,以便在事件处理函数中准确获取到对应的输入框。
通过 `bindinput` 事件可以实时获取输入框的内容,并进行相应的处理。
如果需要限制输入内容,可以使用正则表达式在 `bindinput` 事件处理函数中进行校验。