1. 基本用法：
<input placeholder="请输入内容" bindinput="onInput" />
Page({
onInput: function (event) {
console.log('Input value:', event.detail.value);
}
})
- placeholder：输入框的占位提示文字。
- bindinput：输入框输入时触发的事件，可以在事件处理函数中获取输入的内容。
2. 输入类型：
通过设置 type 属性可以指定输入框的类型，常见的类型包括：
- text：文本输入，单行。
- password：密码输入，内容被隐藏。
- number：数字输入。
- digit：带小数点的数字输入。
- idcard：身份证输入。
- textarea：多行文本输入。
<input type="password" placeholder="请输入密码" bindinput="onInput" />
3. 最大长度：
可以通过设置 maxlength 属性限制输入的最大长度。
<input maxlength="10" placeholder="最多输入10个字符" bindinput="onInput" />
4. 默认值：
可以通过设置 value 属性设置输入框的默认值。
<input value="默认值" placeholder="请输入内容" bindinput="onInput" />
5. 禁用状态：
通过设置 disabled 属性可以禁用输入框。
<input disabled placeholder="禁用状态" />
6. 获取焦点：
通过设置 focus 属性可以让输入框在页面加载时获取焦点。
<input focus placeholder="获取焦点" />
7. 自动聚焦：
通过设置 auto-focus 属性可以让输入框自动聚焦，即页面加载时弹出键盘。
<input auto-focus placeholder="自动聚焦" />
8. 事件：
input 组件支持一些事件，如 bindblur、bindfocus 等，用于在输入框失去焦点、获得焦点时触发相应的事件处理函数。
<input placeholder="失去焦点时触发" bindblur="onBlur" />
<input placeholder="获得焦点时触发" bindfocus="onFocus" />
Page({
onBlur: function (event) {
console.log('Input blurred:', event.detail.value);
},
onFocus: function (event) {
console.log('Input focused:', event.detail.value);
}
})
以上是关于微信小程序 input 组件的一些基本用法和属性。input 主要用于接收用户的文本输入，支持设置类型、最大长度、默认值等属性，并提供一些事件用于处理输入框的状态变化。
转载请注明出处：http://www.zyzy.cn/article/detail/804/微信小程序