This section describes InputItem, the text input component.
Property |
Description |
Type |
Default value |
className |
Custom class. |
String |
‘’ |
labelCls |
Class of the custom labels. |
String |
‘’ |
inputCls |
Class of the custom inputs. |
String |
‘’ |
last |
Whether it is the last line. |
Boolean |
false |
value |
Initial content |
String |
‘’ |
name |
The component name, which is used to submit the form to obtain data. |
String |
‘’ |
type |
Type of the input, which can be text , number , idcard , or digit. |
String |
text |
password |
Whether the type is password. |
Boolean |
false |
placeholder |
The placeholder. |
String |
‘’ |
placeholderStyle |
The specified placeholder style. |
String |
‘’ |
placeholderClass |
The specified placeholder style class. |
String |
‘’ |
disabled |
Whether to disable the button. |
Boolean |
false |
maxlength |
The maximum length. |
Number |
140 |
focus |
Obtain the focus. |
Boolean |
false |
clear |
Whether the clear function is enabled. This property is valid only when the value of disabled is false. |
Boolean |
false |
onInput |
The input event is triggered when keyboard input occurs. |
(e: Object) => void |
- |
onConfirm |
Triggered when the keyboard is tapped. |
(e: Object) => void |
- |
onFocus |
Triggered when the focus action occurs. |
(e: Object) => void |
- |
onBlur |
Triggered when the focus is lost. |
(e: Object) => void |
- |
onClear |
Triggered when you tap to clear the icon. |
() => void |
- |
slots
slotname |
Description |
extra |
Used to render the description of input-item on the right. This property is optional. |
Sample code
{
"defaultTitle": "AntUI component library of the Mini Program",
"usingComponents": {
"list": "mini-antui/es/list/index",
"list-item": "mini-antui/es/list/list-item/index",
"input-item": "mini-antui/es/input-item/index",
"picker-item": "mini-antui/es/picker-item/index"
}
}
<view>
<view style="margin-top: 10px;" />
<list>
<input-item
data-field="cardNo"
clear="{{true}}"
value="{{cardNo}}"
className="dadada"
placeholder="Bank card number"
focus="{{inputFocus}}"
onInput="onItemInput"
onFocus="onItemFocus"
onBlur="onItemBlur"
onConfirm="onItemConfirm"
onClear="onClear"
>
Card number
<view slot="extra" class="extra" onTap="onExtraTap"></view>
</input-item>
<picker-item
data-field="bank"
placeholder="Select the card-issuing bank"
value="{{bank}}"
onPickerTap="onPickerTap"
>
Card-issuing bank
</picker-item>
<input-item
data-field="name"
placeholder="Name"
type="text"
value="{{name}}"
clear="{{true}}"
onInput="onItemInput"
onClear="onClear"
>
Name
</input-item>
<input-item
data-field="password"
placeholder="Password"
password
>
Password
</input-item>
<input-item
data-field="remark"
placeholder="Remarks"
last="{{true}}"
/>
</list>
<view style="margin: 10px;">
<button type="primary" onTap="onAutoFocus">Focus</button>
<view>
</view>
const banks = ['MYbank', 'China Construction Bank', 'Industrial and Commercial Bank of China', 'Shanghai Pudong Development Bank'];
Page({
data: {
cardNo: '1234****',
inputFocus: true,
bank: '',
name: '',
},
onAutoFocus() {
this.setData({
inputFocus: true,
});
},
onExtraTap() {
my.alert({
content: 'extra tapped',
});
},
onItemInput(e) {
this.setData({
[e.target.dataset.field]: e.detail.value,
});
},
onItemFocus() {
this.setData({
inputFocus: false,
});
},
onItemBlur() {},
onItemConfirm() {},
onClear(e) {
this.setData({
[e.target.dataset.field]: '',
});
},
onPickerTap() {
my.showActionSheet({
title: 'Select the card-issuing bank',
items: banks,
success: (res) => {
this.setData({
bank: banks[res.index],
});
},
});
},
});
.extra {
background-image: url('https://gw.alipayobjects.com/zos/rmsportal/dOfSJfWQvYdvsZiJStvg.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: right center;
opacity: 0.2;
height: 20px;
width: 20px;
padding-left: 10px;
}