Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

<input>

<input> is used to create interactive input controls that allow users to input and edit single-line text.

TIP

This feature requires the client to add additional dependencies. Please refer to More Elements for the integration method.

Usage

Basic

Below is a basic usage example of the <input> component:

inputsrc/base/index.tsx
Preview

Keyboard Avoidance

<input> doesn't automatically avoid keyboards, but you can adjust its position by listening to keyboard events and modifying its position accordingly:

inputsrc/auto-height/index.tsx
Preview

Attributes

android-fullscreen-mode

Android only
3.4 
// @defaultValue: true
'android-fullscreen-mode'?: boolean;

Whether to enter the full-screen input mode when in landscape screen, in which the keyboard and input box will take up the entire screen

confirm-type

Android only
iOS only
Harmony only
3.4 
// @defaultValue: 'send'
'confirm-type'?: 'search' | 'send' | 'go' | 'done' | 'next';

The type of confirm button

disabled

Android only
iOS only
Harmony only
3.5 
// @defaultValue: false
disabled?: boolean;

Interaction enabled

input-filter

Android only
iOS only
Harmony only
3.4 
// @defaultValue: undefined
'input-filter'?: string;

Filter the input content and process it in the form of regular expressions

ios-auto-correct

iOS only
3.4 
// @defaultValue: true
'ios-auto-correct'?: boolean;

Auto correct input content on iOS

ios-spell-check

iOS only
3.4 
// @defaultValue: true
'ios-spell-check'?: boolean;

Check spelling issue on iOS

maxlength

Android only
iOS only
Harmony only
3.4 
// @defaultValue: 140
maxlength?: number;

Max input length

placeholder

Android only
iOS only
Harmony only
3.4 
placeholder?: string;

Placeholder

readonly

Android only
iOS only
Harmony only
3.4 
// @defaultValue: false
readonly?: boolean;

Readonly

show-soft-input-on-focus

Android only
iOS only
Harmony only
3.4 
// @defaultValue: true
'show-soft-input-on-focus'?: boolean;

Show soft input keyboard while focused

type

Android only
iOS only
Harmony only
3.4 
// @defaultValue: "text"
type?: 'number' | 'text' | 'digit' | 'password' | 'tel' | 'email';

Input content type

Events

Frontend can bind corresponding event callbacks to listen for runtime behaviors of the element, as shown below.

bindblur

Android only
iOS only
Harmony only
3.4 
bindblur = (e: InputBlurEvent) => {};
FieldTypeOptionalDefaultPlatformsSinceDescription
valuestringNo–
Android only
iOS only
Harmony only
3.4		3.4Input content

Blurred

bindconfirm

Android only
iOS only
Harmony only
3.4 
bindconfirm = (e: InputConfirmEvent) => {};
FieldTypeOptionalDefaultPlatformsSinceDescription
valuestringNo–
Android only
iOS only
Harmony only
3.4		3.4Input content

Confirm button clicked

bindfocus

Android only
iOS only
Harmony only
3.4 
bindfocus = (e: InputFocusEvent) => {};
FieldTypeOptionalDefaultPlatformsSinceDescription
valuestringNo–
Android only
iOS only
Harmony only
3.4		3.4Input content

Focused

bindinput

Android only
iOS only
Harmony only
3.4 
bindinput = (e: InputInputEvent) => {};
FieldTypeOptionalDefaultPlatformsSinceDescription
isComposingbooleanYes–
Android only
iOS only
Harmony only
3.4		3.4Is composing or not
selectionEndnumberNo–
Android only
iOS only
Harmony only
3.4		3.4The end position of the selection
selectionStartnumberNo–
Android only
iOS only
Harmony only
3.4		3.4The start position of the selection
valuestringNo–
Android only
iOS only
Harmony only
3.4		3.4Input content

Input content changed

bindselection

Android only
iOS only
Harmony only
3.4 
bindselection = (e: InputSelectionEvent) => {};
FieldTypeOptionalDefaultPlatformsSinceDescription
selectionEndnumberNo–
Android only
iOS only
Harmony only
3.4		3.4The end position of the selection
selectionStartnumberNo–
Android only
iOS only
Harmony only
3.4		3.4The start position of the selection

Input selection changed

Methods

Frontend can invoke component methods via the SelectorQuery API.

blur

Android only
iOS only
Harmony only
3.4 

lynx.createSelectorQuery()
.select('#id')
.invoke({
method: 'blur',
success: function (res) {},
fail: function (res) {},
})
.exec();

Release focus

focus

Android only
iOS only
Harmony only
3.4 

lynx.createSelectorQuery()
     .select('#id')
     .invoke({
      method: 'focus',
      success: function (res) {},
      fail: function (res) {},
    })
    .exec();

Require focus

getValue

Android only
iOS only
Harmony only
3.4 

lynx.createSelectorQuery()
.select('#id')
.invoke({
method: 'getValue',
success: Callback<{
/**
_ Is composing or not, iOS only
_ @Android
_ @iOS
_ @Harmony
_ @Web
_ @since 3.4
\*/
isComposing: boolean;
/**
_ End position of the selection
_ @Android
_ @iOS
_ @Harmony
_ @Web
_ @since 3.4
_/
selectionEnd: number;
/\*\*
_ Begin position of the selection
_ @Android
_ @iOS
_ @Harmony
_ @Web
_ @since 3.4
_/
selectionStart: number;
/\*\*
_ Input content
_ @Android
_ @iOS
_ @Harmony
_ @Web
_ @since 3.4
\*/
value: string;
}>;
fail: function (res) {},
})
.exec();

Get input content

setSelectionRange

Android only
iOS only
Harmony only
3.4 

lynx.createSelectorQuery()
     .select('#id')
     .invoke({
      method: 'setSelectionRange',
      params: {
        /**
         * End position of the selection
         * @Android
         * @iOS
         * @Harmony
         * @Web
         * @since 3.4
         */
        selectionEnd: number;
        /**
         * Start position of the selection
         * @Android
         * @iOS
         * @Harmony
         * @Web
         * @since 3.4
         */
        selectionStart: number;
      };
      success: function (res) {},
      fail: function (res) {},
    })
    .exec();

Set selection range

setValue

Android only
iOS only
Harmony only
3.4 

lynx.createSelectorQuery()
.select('#id')
.invoke({
method: 'setValue',
params: {
/\*\*
_ Input content
_ @Android
_ @iOS
_ @Harmony
_ @Web
_ @since 3.4
\*/
value: string;
};
success: function (res) {},
fail: function (res) {},
})
.exec();

Set input content

Compatibility

LCD tables only load in the browser

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.