InputItem
Text input.
Sample Code
copy
// API-DEMO page/component/input-item/input-item.json
{
"defaultTitle": "Mini Program AntUI component library",
"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"
}
}
copy
<!-- API-DEMO page/component/input-item/input-item.axml -->
<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 issuing bank"
value="{{bank}}"
onPickerTap="onPickerTap"
>
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>
copy
// API-DEMO page/component/input-item/input-item.js
const banks = ['Mybank', 'CCB', 'ICBC', 'SPDB'];
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 issuing bank',
items: banks,
success: (res) => {
this.setData({
bank: banks[res.index],
});
},
});
},
});
copy
/* API-DEMO page/component/input-item/input-item.acss */
.extra {
background-image: url('https://img.example.com/example.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: right center;
opacity: 0.2;
height: 20px;
width: 20px;
padding-left: 10px;
}
Attributes
Property | Description | Type | Default |
className | Customized class. | String | '' |
labelCls | Customized label class. | String | '' |
inputCls | Customized input class. | String | '' |
last | Is the last row or not. | Boolean | false |
value | Initial contents. | String | '' |
name | Component name, used for getting data via form submission. | String | '' |
type | Type of input, effective values including text, number, idcard and digit (see table below for details). | String | text |
password | Is password type or not. | Boolean | false |
placeholder | Placeholder. | String | '' |
placeholderStyle | Specify the style of the placeholder. | String | '' |
placeholderClass | Specify the style class of the placeholder. | String | '' |
disabled | Disable or not. | Boolean | false |
maxlength | Maximum length. | Number | 140 |
focus | Get focus. | Boolean | false |
clear | Have clear function or not, taking effect only when disabled is false. | Boolean | false |
onInput | Trigger the input event on keyboard input. | (e: Object) => void | - |
onConfirm | Trigger on clicking keyboard completion. | (e: Object) => void | - |
onFocus | Trigger on getting focus. | (e: Object) => void | - |
onBlur | Trigger on losing focus. | (e: Object) => void | - |
onClear | Trigger on clicking the clear icon. | () => void | - |
Description of type attribute value
• text: Character input box
• number: Pure number input box (number within 0-9)
• idcard: Input box for ID card number (number within 0-9 and character x)
• digit: number input box (number within 0-9 and decimal point . used for number containing a decimal)
Note: The type attribute value affects the keyboard type with real machine and may not be effective in simulators.
Slots
slotname | Description | Required |
extra | Used to render the description right to input-item. | No |
Common Questions
When the setData
data is empty, the breakpoint money value is set to empty, but why 0 is still shown in the input box?
When this.setData
sets data as empty, it does not render the page. It is recommended to use the component clear.