title: Input
sidebar_label: Input
Input box. This component is a Native Component. Note related limits before use.
Reference
Type
ComponentType<InputProps>
Examples
import Tabs from ‘@theme/Tabs’
import TabItem from ‘@theme/TabItem’
tsx
class App extends Component {
render () {
return (
<View className='example-body'>
<Text>Auto-focusable</Text>
<Input type='text' placeholder='focus will be acquired' focus/>
<Text>Controls the maximum input length</Text>
<Input type='text' placeholder='maximum input length is 10' maxlength='10'/>
<Text>Input box for numeric type</Text>
<Input type='number' placeholder='This is a numeric input box'/>
<Text>Input box for password type</Text>
<Input type='password' password placeholder='This is a password input box'/>
<Text>Input boxes for numeric types that allow decimals</Text>
<Input type='digit' placeholder='Numeric keypad with decimal point'/>
<Text>Input box for ID type</Text>
<Input type='idcard' placeholder='Keyboard support for entering ID cards'/>
<Text>Input box with placeholder color control</Text>
<Input type='text' placeholder='Placeholder font is red' placeholderStyle='color:red'/>
</View>
)
}
}
html
<template>
<view class="example-body">
<text>Auto-focusable</text>
<input type="text" placeholder="focus will be acquired" :focus="true" />
<text>Controls the maximum input length</text>
<input type="text" placeholder="maximum input length is 10" maxlength="10"/>
<text>Input box for numeric type</text>
<input type="number" placeholder="This is a numeric input box"/>
<text>Input box for password type</text>
<input type="password" :password="true" placeholder="This is a password input box"/>
<text>Input boxes for numeric types that allow decimals</text>
<input type="digit" placeholder="Numeric keypad with decimal point"/>
<text>Input box for ID type</text>
<input type="idcard" placeholder="Keyboard support for entering ID cards"/>
<text>Input box with placeholder color control</text>
<input type="text" placeholder="Placeholder font is red" placeholder-style="color:red;"/>
</view>
</template>
InputProps
Property |
Type |
Default |
Required |
Description |
value |
string |
|
No |
The initial content in the input box |
type |
"number" | "text" | "idcard" | "digit" |
"text" |
No |
The type of input |
password |
boolean |
|
No |
Specifies whether the input is password-type content |
placeholder |
string |
|
No |
The placeholder used when the input box is empty |
placeholderStyle |
string |
|
No |
Specifies the style of the placeholder |
placeholderClass |
string |
"input-placeholder" |
No |
Specifies the style class of the placeholder |
disabled |
boolean |
|
No |
Specifies whether to disable the component |
maxlength |
number |
140 |
No |
The maximum length. When it is set to “-1”, the maximum length is not limited. |
cursorSpacing |
number |
0 |
No |
Specifies the distance between the cursor and the keyboard. It is either the distance between the input box and the bottom of the screen or the distance specified via cursor-spacing, whichever is smaller. |
autoFocus |
boolean |
false |
No |
(Will be discarded soon. Use the focus instead.) Auto focus. The keyboard is automatically displayed. |
focus |
boolean |
|
No |
Gets focus |
confirmType |
"send" | "search" | "next" | "go" | "done" |
done |
No |
Sets the text on the lower-right button on the keyboard. It takes effect only when type=’text’. |
confirmHold |
boolean |
false |
No |
Specifies whether the keyboard is not hidden when the lower-right button on the keyboard is tapped |
cursor |
number |
|
No |
Specifies the cursor position during focusing |
selectionStart |
number |
-1 |
No |
The start position of the cursor. It takes effect only during auto focusing, and needs to used with selection-end. |
selectionEnd |
number |
-1 |
No |
The end position of the cursor. It takes effect only during auto focusing, and needs to used with selection-start. |
adjustPosition |
boolean |
true |
No |
Specifies whether to automatically push up the page when the keyboard is displayed |
holdKeyboard |
boolean |
false |
No |
Specifies whether to hide the keyboard when the page is clicked when focused |
onInput |
BaseEventOrigFunction<inputEventDetail> |
|
No |
Triggered when the user taps the keyboard. event.detail = {{value, cursor, keyCode} }, where keyCode is the key value. The processing function can directly return a string to replace the content in the input box. |
onFocus |
BaseEventOrigFunction<inputForceEventDetail> |
|
No |
Triggered when the input box is focused. event.detail = {{ value, height } }, where height is the height of the keyboard. |
onBlur |
BaseEventOrigFunction<inputValueEventDetail> |
|
No |
Triggered when the input box is unfocused. event.detail = {{value} } |
onConfirm |
BaseEventOrigFunction<inputValueEventDetail> |
|
No |
Triggered when the Done button is tapped. |
onKeyboardHeightChange |
BaseEventOrigFunction<onKeyboardHeightChangeEventDetail> |
|
No |
Triggered when the height of the keyboard changes.
event.detail = {{height: height, duration: duration} } |
Property Support
Property |
WeChat Mini-Program |
H5 |
React Native |
InputProps.value |
✔️ |
✔️ |
✔️ |
InputProps.type |
✔️ |
✔️ |
✔️(partial support) |
InputProps.password |
✔️ |
✔️ |
✔️ |
InputProps.placeholder |
✔️ |
✔️ |
✔️ |
InputProps.placeholderStyle |
✔️ |
|
|
InputProps.placeholderClass |
✔️ |
|
|
InputProps.disabled |
✔️ |
✔️ |
✔️ |
InputProps.maxlength |
✔️ |
✔️ |
✔️ |
InputProps.cursorSpacing |
✔️ |
|
|
InputProps.autoFocus |
✔️ |
|
|
InputProps.focus |
✔️ |
✔️ |
✔️ |
InputProps.confirmType |
✔️ |
|
✔️ |
InputProps.confirmHold |
✔️ |
|
|
InputProps.cursor |
✔️ |
|
✔️ |
InputProps.selectionStart |
✔️ |
|
✔️ |
InputProps.selectionEnd |
✔️ |
|
✔️ |
InputProps.adjustPosition |
✔️ |
|
|
InputProps.holdKeyboard |
✔️ |
|
|
InputProps.onInput |
✔️ |
✔️ |
✔️ |
InputProps.onFocus |
✔️ |
✔️ |
✔️ |
InputProps.onBlur |
✔️ |
✔️ |
✔️ |
InputProps.onConfirm |
✔️ |
(Borrow theForm component’s onSubmit event instead) |
✔️ |
InputProps.onKeyboardHeightChange |
✔️ |
|
inputEventDetail
Value |
Type |
Description |
value |
string |
input value |
cursor |
number |
cursor position |
keyCode |
number |
Key Value |
Note: React-Native side inputEventDetail
only has parameter value
,if you need to get the cursor position in real time, you can do it by onSelectionChange
.
inputForceEventDetail
Param |
Type |
Description |
value |
string |
input value |
height |
number |
Keyboard height |
inputValueEventDetail
Param |
Type |
Description |
value |
string |
input value |
onKeyboardHeightChangeEventDetail
Param |
Type |
Description |
height |
number |
Keyboard height |
duration |
number |
Duration |
API Support
API |
WeChat Mini-Program |
H5 |
React Native |
Input |
✔️ |
✔️ |
✔️ |