All Products
Search
Document Center

input

Last Updated: Apr 19, 2021

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 text, number, idcard, digit, numberpad, digitpad, and idcardpad. The numberpad, digitpad, and idcardpad1.13.0 types are supported starting from the 10.1.50 client. You can determine the value by running my.canIUse('input.type.numberpad').
password Boolean false Whether the type is password. -
placeholder String - The placeholder. -
placeholder-style String - The specified placeholder style. 1.6.0
placeholder-class String - The specified placeholder style class. 1.6.0
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. 1.7.0
confirm-hold Boolean false Whether to keep the keyboard unfolded when the button in the lower-right corner of the keyboard is clicked. 1.7.0
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. 1.7.0
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. 1.7.0
randomNumber Boolean false Whether to arrange the numeric keypad randomly when type is set to number, digit, or idcard. 1.9.0
controlled Boolean false Whether the component is a controlled component. If the value is true, the content of value is fully controlled by setData. 1.8.0
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}. -

Illustration

image | center

Code sample

 
  1. <input maxlength="10" placeholder="The maximum entry length is 10" />
  2. <input onInput="bindKeyInput" placeholder="The input value will be synced to View"/>
  3. <input type="number" placeholder="This is a numeric entry box" />
  4. <input password type="text" placeholder="This is a password entry box" />
  5. <input type="digit" placeholder="Numeric keypad with decimal point"/>
  6. <input type="idcard" placeholder="The ID number entry keypad" />
 
  1. Page({
  2. data: {
  3. inputValue: '',
  4. },
  5. bindKeyInput(e) {
  6. this.setData({
  7. inputValue: e.detail.value,
  8. });
  9. },
  10. });

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.

 
  1. <input placeholder="The ID number entry keypad" enableNative="{{false}}" />