Skip to main content

textarea

Props#

PropertyTypeDefault ValueRequiredDescription
valueStringThe initial content in the input box.
placeholderStringThe placeholder used when the input box is empty.
placeholderStyleStringSpecifies the style of the placeholder. Only color, font-size, and font-weight styles are supported.
placeholderClassStringtextarea-placeholderSpecifies the style class of the placeholder.
disabledBooleanfalseSpecifies whether to disable the component.
maxlengthNumber140The maximum length. When it is set to -1, the maximum length is not limited.
autoFocusBooleanfalse(Will be discarded soon. Use the focus instead.) Auto focus. The keyboard is automatically displayed.
focusBooleanfalseGets focus.
autoHeightBooleanfalseSpecifies whether the height automatically increases. If this property is specified, style.height does not take effect.
fixedBooleanfalseIf the textarea is in an area of position:fixed, the value of the specified property should always be true.
cursorSpacingNumber0Specifies the distance between the cursor and the keyboard. It is either the distance between textarea and the bottom of the screen or the distance specified via cursorSpacing, whichever is smaller.
cursorNumber-1Specifies the cursor position during focusing.
showConfirmBarBooleantrueSpecifies whether to display the bar containing the Done button above the keyboard.
selectionStartNumber-1The start position of the cursor. It takes effect only during auto focusing, and needs to used with selection-end.
selectionEndNumber-1The end position of the cursor. It takes effect only during auto focusing, and needs to used with selection-start.
adjustPositionBooleantrueSpecifies whether to automatically push up the page when the keyboard is displayed.
holdKeyboardBooleanfalseSpecifies whether to hide the keyboard when clicking page while the input is focused.
disableDefaultPaddingBooleanfalseSpecifies whether to remove the default padding behavior on iOS.
confirmTypeStringreturnSets the text on the lower-right button on the keyboard. It takes effect only when type='text'.
confirmHoldBooleanfalseSpecifies whether the keyboard is not hidden when the lower-right button on the keyboard is tapped.
onInputEvent handlerTriggered when the user taps the keyboard. event.detail = { value, cursor, keyCode }, where keyCode is the key value.box.
onFocusEvent handlerTriggered when the input box is focused. event.detail = { value, height }
onBlurEvent handlerTriggered when the input box is unfocused. event.detail = { value, cursor }.
onLineChangeEvent handlerCalled when the number of lines in the input box changes. event.detail = { height: number, heightRpx: number, lineCount: number }
onConfirmEvent handlerTriggered when the Done button is tapped. event.detail = { value }.
onKeyboardHeightChangeEvent handlerTriggered when the height of the keyboard changes. event.detail = { height, duration}.

Valid values of confirm-type#

ValueDescription
sendIndicates that the button in the lower right corner is Send.
searchIndicates that the button in the lower right corner is Search.
nextIndicates that the button in the lower right corner is Next.
goIndicates that the button in the lower right corner is GO.
doneIndicates that the button in the lower right corner is Done.
returnIndicates that the button in the lower right corner is Return.

bug & tips#

  • tip: if developer need change the caret-color of input component, developer should use css class to set it instead of inline style
    <!-- bxml --><Textarea class="caret-color-red"></Textarea><!-- css class --><style>.caret-color-red {  caret-color: red;}</style>