Input

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

Reference

Type

ComponentType<InputProps>

Examples

React

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

Vue

<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	✔️	✔️	✔️