This topic describes the input component.
Attribute | Type | Default value | Description | Minimum version |
value | String | - | Initial content | - |
name | String | - | The component name, which is used to submit the form to obtain data. | - |
type | String | text | The input type, which can be |
|
password | Boolean | false | Whether the type is password. | - |
placeholder | String | - | The placeholder. | - |
placeholder-style | String | - | The specified placeholder style. | |
placeholder-class | String | - | The specified placeholder style class. | |
disabled | Boolean | false | Whether to disable the button. | - |
maxlength | Number | 140 | The maximum length. | - |
focus | Boolean | false | Obtain the focus. | This feature is not supported. |
confirm-type | String | done | Set the text of the button in the lower-right corner of the keyboard. Possible values are done (display “done”), go (display “go”), next (display “next”), search (display “search”), and send (display “send” ). The displayed text varies slightly depending on different platforms. This attribute is valid only when type=text. | |
confirm-hold | Boolean | false | Whether to keep the keyboard unfolded when the button in the lower-right corner of the keyboard is clicked. | |
cursor | Number | - | Specify the cursor position when focused. | - |
selection-start | Number | -1 | The starting position of the focus cursor corresponding to the selected text when the cursor is obtained. This attribute must be used in conjunction with selection-end. | |
selection-end | Number | -1 | The ending position of the focus cursor corresponding to the selected text when the cursor is obtained. This attribute must be used in conjunction with selection-start. | |
randomNumber | Boolean | false | Whether to arrange the numeric keypad randomly when type is set to number, digit, or idcard. | |
controlled | Boolean | false | Whether the component is a controlled component. If the value is true, the content of value is fully controlled by setData. | |
onInput | EventHandle | - | Trigger the input event when a keyboard entry occurs, where event.detail = {value: value}. | - |
onConfirm | EventHandle | - | Trigger when the keyboard clicking action is completed, where event.detail = {value: value}. | - |
onFocus | EventHandle | - | Trigger when the focus action occurs, where event.detail = {value: value}. | - |
onBlur | EventHandle | - | Trigger when the focus is lost, where event.detail = {value: value}. | - |
Code sample
<input maxlength="10" placeholder="The maximum entry length is 10" />
<input onInput="bindKeyInput" placeholder="The input value will be synced to View"/>
<input type="number" placeholder="This is a numeric entry box" />
<input password type="text" placeholder="This is a password entry box" />
<input type="digit" placeholder="Numeric keypad with decimal point"/>
<input type="idcard" placeholder="The ID number entry keypad" />
Page({
data: {
inputValue: '',
},
bindKeyInput(e) {
this.setData({
inputValue: e.detail.value,
});
},
});
Handle interaction exceptions between the iOS keyboard and components
For components that need to start the keyboard, such as input and textarea, the native keyboard is currently used by default. When an interaction exception occurs between the keyboard and a component, you can add the enableNative="{{false}}"
attribute to the component to restore to the keyboard that uses WKWebview, as shown in the following code. Meanwhile, since the system keyboard is used, the numeric keypad provided by mPaaS cannot be used. Currently, no special adaptation is available for keyboard-related exceptions. To handle such interaction exceptions, use this method.
<input placeholder="The ID number entry keypad" enableNative="{{false}}" />