input - Mobile Platform as a Service - Alibaba Cloud Documentation Center

This topic describes the input component.

Property	Type	Default	Description	Minimum version
value	String	-	Initial content.	-
name	String	-	The name of the component. It is used to get data when a form is submitted.	-
type	String	text	The type of the input. Valid values: `text`, `number`, `idcard`, `digit`, `numberpad`, `digitpad`, and `idcardpad`.	`numberpad`, `digitpad`, and `idcardpad` are supported from version 1.13.0. The client supports these types from version 10.1.50. Check for support using `my.canIUse('input.type.numberpad')`.
password	Boolean	false	Specifies whether the input is a password type.	-
placeholder	String	-	Placeholder text.	-
placeholder-style	String	-	Specifies the style of the placeholder.	1.6.0
placeholder-class	String	-	Specifies the style class of the placeholder.	1.6.0
disabled	Boolean	false	Specifies whether to disable the input.	-
maxlength	Number	140	Maximum length.	-
focus	Boolean	false	Gets focus.	This attribute is not supported.
confirm-type	String	done	Sets the text of the button in the lower-right corner of the keyboard. Valid values: done (displays "Done"), go (displays "Go"), next (displays "Next"), search (displays "Search"), and send (displays "Send"). The displayed text may vary slightly across platforms. Note that this attribute is valid only when type is set to text.	1.7.0
confirm-hold	Boolean	false	Specifies whether to keep the keyboard displayed when the button in the lower-right corner is tapped.	1.7.0
cursor	Number	-	Specifies the cursor position when the input gets focus.	-
selection-start	Number	-1	The start position of the selected text when the input gets focus. This attribute must be used with selection-end.	1.7.0
selection-end	Number	-1	The end position of the selected text when the input gets focus. This attribute must be used with selection-start.	1.7.0
randomNumber	Boolean	false	Specifies whether to randomize the layout of the numeric keypad when type is set to number, digit, or idcard.	1.9.0
controlled	Boolean	false	Specifies whether the component is controlled. If set to true, the value is fully controlled by setData.	1.8.0
onInput	EventHandle	-	Triggers an input event during keyboard input.	-
onConfirm	EventHandle	-	Triggers when the Done button on the keyboard is tapped.	-
onFocus	EventHandle	-	Triggers when the input gets focus.	-
onBlur	EventHandle	-	Triggers when the input loses focus.	-

Code examples

<input maxlength="10" placeholder="Maximum input length is 10" />
<input onInput="bindKeyInput" placeholder="Input is synced to the view"/>
<input type="number" placeholder="This is a numeric input box" />
<input password type="text" placeholder="This is a password input box" />
<input type="digit" placeholder="Numeric keypad with a decimal point"/>
<input type="idcard" placeholder="ID card input keypad" />

Page({
  data: {
    inputValue: '',
  },
  bindKeyInput(e) {
    this.setData({
      inputValue: e.detail.value,
    });
  },
});

Handle iOS keyboard interaction exceptions

Components such as input and textarea use the native keyboard by default. If an interaction exception occurs between the keyboard and a component, you can add the enableNative="{{false}}" attribute to the component. This action reverts the component to the WKWebView keyboard. When the system keyboard is used, the mPaaS numeric keypad is unavailable. Special adaptations for keyboard and component interactions are no longer provided. Use this method to handle any interaction exceptions.

<input placeholder="ID card input keypad" enableNative="{{false}}" />