Skip to main content
Version: 3.x

Input

Input box. This component is a Native Component. Note related limits before use.

Reference

Type

ComponentType<InputProps>

Examples

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>
)
}
}

InputProps

PropertyTypeDefaultRequiredDescription
valuestringNoThe initial content in the input box
type"number" | "text" | "idcard" | "digit""text"NoThe type of input
passwordbooleanNoSpecifies whether the input is password-type content
placeholderstringNoThe placeholder used when the input box is empty
placeholderStylestringNoSpecifies the style of the placeholder
placeholderClassstring"input-placeholder"NoSpecifies the style class of the placeholder
disabledbooleanNoSpecifies whether to disable the component
maxlengthnumber140NoThe maximum length. When it is set to "-1", the maximum length is not limited.
cursorSpacingnumber0NoSpecifies 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.
autoFocusbooleanfalseNo(Will be discarded soon. Use the focus instead.) Auto focus. The keyboard is automatically displayed.
focusbooleanNoGets focus
confirmType"send" | "search" | "next" | "go" | "done"doneNoSets the text on the lower-right button on the keyboard. It takes effect only when type='text'.
confirmHoldbooleanfalseNoSpecifies whether the keyboard is not hidden when the lower-right button on the keyboard is tapped
cursornumberNoSpecifies the cursor position during focusing
selectionStartnumber-1NoThe start position of the cursor. It takes effect only during auto focusing, and needs to used with selection-end.
selectionEndnumber-1NoThe end position of the cursor. It takes effect only during auto focusing, and needs to used with selection-start.
adjustPositionbooleantrueNoSpecifies whether to automatically push up the page when the keyboard is displayed
holdKeyboardbooleanfalseNoSpecifies whether to hide the keyboard when the page is clicked when focused
onInputBaseEventOrigFunction<inputEventDetail>NoTriggered 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.
onFocusBaseEventOrigFunction<inputForceEventDetail>NoTriggered when the input box is focused. event.detail = { value, height }, where height is the height of the keyboard.
onBlurBaseEventOrigFunction<inputValueEventDetail>NoTriggered when the input box is unfocused. event.detail = {value}
onConfirmBaseEventOrigFunction<inputValueEventDetail>NoTriggered when the Done button is tapped.
onKeyboardHeightChangeBaseEventOrigFunction<onKeyboardHeightChangeEventDetail>NoTriggered when the height of the keyboard changes.

event.detail = {height: height, duration: duration}

Property Support

PropertyWeChat Mini-ProgramH5React 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

ValueTypeDescription
valuestringinput value
cursornumbercursor position
keyCodenumberKey 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

ParamTypeDescription
valuestringinput value
heightnumberKeyboard height

inputValueEventDetail

ParamTypeDescription
valuestringinput value

onKeyboardHeightChangeEventDetail

ParamTypeDescription
heightnumberKeyboard height
durationnumberDuration

API Support

APIWeChat Mini-ProgramH5React Native
Input✔️✔️✔️