Input
Input box. This component is a Native Component. Note related limits before use.
Type
ComponentType<InputProps>
Examples
- React
- Vue
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>
)
}
}
<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 parametervalue
,if you need to get the cursor position in real time, you can do it byonSelectionChange
.
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 | ✔️ | ✔️ | ✔️ |