Input - 《Taro 文档帮助手册教程》

sidebar_label: Input
Type
Examples
InputProps
API Support

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