Entering content in an input box through the keyboard is the most basic form of field packaging. Generally, an input box is used to collect information on a form page. Two types of input boxes are provided: text box and selection box.
When you use Input as a form with a Form/FormItem component, you must set mode to form.
Property
Property | Type | Required | Default value | Description |
label | string | slot | No | - | The label. |
controlled | boolean | No | false | Whether the input box is controlled. |
type | 'text' | 'number' | 'idcard' | 'digit' | 'numberpad' | 'digitpad' | 'idcardpad' | No | 'text' | The input box type. |
password | boolean | No | false | Whether the entered content is of password type. |
placeholder | string | No | - | The placeholder. |
placeholderClass | string | No | - | The style class of the placeholder. |
placeholderStyle | string | No | - | The style of the placeholder. You can set intervals. |
maxLength | number | No | 140 | The maximum length. |
confirmType | 'done' | 'go' | 'next' | 'search' | 'send' | No | "done" | Sets the text on the button on the right corner of the keyboard. Valid values include done (display "done"); go (display "go"), next (display "next"), search (display "next"), and send (display "send"). The text displayed varies depending on the platform. Important This property takes effect only when type is set to text. |
confirmHold | boolean | No | false | Whether to keep the keyboard in a non collapsed state when tapping the button in the lower right corner of the keyboard. |
cursor | number | No | - | The position of the cursor when the focus is set. |
selectionStart | number | No | -1 | The cursor start position of the selected text. This property must be used together with the selection-end property. |
selectionEnd | number | No | -1 | The cursor end position of the started text. This property must be used together with the selection-start property. |
randomNumber | boolean | No | false | Whether the numeric keypad is arranged randomly when type is set to number, digit, or idcard. |
enableNative | boolean | No | - | Whether to enable Native rendering. |
layer | 'horizontal' | 'vertical' | No | 'horizontal' | The orientation of the input box. |
inputCls | string | No | - | The style class of the input box. |
labelCls | string | No | - | The style class of the label area. |
value | string | No | - | The value of the input box. |
clear | boolean | No | true | Whether to display the clear icon. |
autoFocus | boolean | No | false | Whether to enable auto-focus. This property may not take effect on iOS devices. |
ref | React.Ref | No | - | The instance for operating the form. Currently, two methods focus and blur are provided. |
id | string | No | - | The ID of the form element. |
name | string | No | - | The name of the form element. |
disabled | boolean | No | false | Whether to disable the component. |
mode | 'noraml' | 'form' | No | normal | When you use this component with a From/FormItem component, you must set this property to form. |
className | string | No | - | The class name. |
Event
Event name | Description | Type |
onConfirm | Callback fired when the confirm event of the keyboard is received. |
|
onClear | Callback fired when the entered content is cleared. |
|
onFocus | Callback fired when the focus is set on the input box. |
|
onBlur | Callback fired when the input box loses the focus. |
|
onChange | Callback fired when a user enters content. |
|
Style class
Class name | Description |
amd-input-item | The entire style. |
amd-input-item-line | The entire style. |
amd-input-item-layer | The style of the content area on the left. |
amd-input-item-layer-vertical | The style of the content area on the left. |
amd-input-item-layer-normal | The style of the content area on the left. |
amd-input-item-label | The style of the label. |
amd-input-item-content | The style of the input component. |
amd-input-item-clear | The style of the clear icon area. |
amd-input-item-clear-icon | The style of the clear icon. |
amd-input-item-extra | The style of the extra area. |
Code sample
Basic usage
The following shows an example of the code in the index.axml file:
<view>
<demo-block title="Basic usage">
<input-item placeholder="Please enter the content" clear="{{false}}" type="text" onChange="handleItemChange" onFocus="handleItemFocus" onBlur="handleItemBlur" onConfirm="handleItemConfirm" >
</input-item>
</demo-block>
<demo-block title="with clear button">
<input-item placeholder="Please enter the content" clear="{{true}}" type="text" onChange="handleItemChange" onClear="handleItemClear">
</input-item>
</demo-block>
<demo-block title="Disabled status">
<input-item placeholder="Disabled input box" disabled="{{true}}" clear="{{true}}" type="text" onChange="handleItemChange" onClear="handleItemClear">
</input-item>
</demo-block>
</view>The following shows an example of the code in the index.js file:
Page({
data: {
},
handleItemChange(e) {
// eslint-disable-next-line no-console
console.log('onItemChange:', e);
},
handleItemFocus(v) {
// eslint-disable-next-line no-console
console.log('focus:', v);
},
handleItemBlur(v) {
// eslint-disable-next-line no-console
console.log('blur:', v);
},
handleItemConfirm(v) {
// eslint-disable-next-line no-console
console.log('confirm:', v);
},
handleItemClear() {
// eslint-disable-next-line no-console
console.log('onItemClear');
},
});The following shows an example of the code in the index.acss file:
.demoList {
margin-top: 12px;
margin-bottom: 12px;
padding: 0 12px
}
.amd-input-item-title {
margin-top: 12px;
font-family: PingFangSC-Regular;
font-size: 17px;
color: #666666;
margin-bottom: 8px;
text-align: center;
}
.amd-list-item-line {
position: relative;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-align-self: stretch;
align-self: stretch;
max-width: 100%;
overflow: hidden;
padding: 0px 0px;
}
.amd-list-input-item-arrow {
height: 15px;
width: 7.5px;
}
.amd-list-input-item-phone {
height: 18px;
width: 16px;
}
.amd-list-input-item-code {
font-family: PingFangSC-Regular;
font-size: 17px;
color: #1677ff;
text-align: center;
}
.amd-list-input-item-line {
color: #EEEEEE;
margin: 0 12px 0 10px;
}The following shows an example of the code in the index.json file:
{
"defaultTitle": "InputItem",
"usingComponents": {
"input-item": "antd-mini/es/InputItem/index",
"demo-block": "../../components/DemoBlock/index"
}
}