Lynx
指引
API
博客
贡献
指引
API
博客
贡献
简体中文

<textarea>

<textarea> 用于创建交互式输入控件，允许用户输入和编辑多行文本。

INFO

此功能需要客户端添加额外依赖才能被使用，集成方式请请参考 More Elements.

使用指南

基本用法

下面是一个基本的 <textarea> 组件用法示例：

textareasrc/base/index.tsx
预览

自定义占位符样式

<textarea> 可以通过设置 ::placeholder 伪元素来定制其样式：

textareasrc/customized-placeholder/index.tsx
预览

属性

属性名和属性值用于描述元件的行为和外观。

placeholder

// DefaultValue: undefined
placeholder?: string

占位文字

confirm-type

// DefaultValue: undefined
'confirm-type'?: 'send' | 'search' | 'go' | 'done' | 'next';

指定输入法回车键的表现形式

maxlength

// DefaultValue: 140
maxlength?: number;

输入框最大字符数量限制

maxlines

// DefaultValue: 140
maxlines?: number;

输入框最大输入行数量限制

readonly

// DefaultValue: false
readonly?: boolean;

是否允许输入框可交互，不影响对其进行组件方法调用

show-soft-input-on-focus

// DefaultValue: true
'show-soft-input-on-focus'?: boolean;

聚焦时是否允许拉起系统软键盘

type

// DefaultValue: 'text'
type?: 'text' | 'number' | 'digit' | 'tel' | 'email';

指定键盘的类型

  • text\tel\email: 全符号
  • number: 0-9 +-.
  • digit: 0-9 .
INFO

不同的输入法可能会有不同的视觉表现

input-filter

// DefaultValue: undefined
'input-filter'?: string;

指定单个字符的过滤条件，用正则表达式描述

事件

前端可以在元件上设置事件处理器属性来监听元件的运行时行为。

bindfocus

export interface TextareaFocusEvent {
  value: string;
}
 bindfocus?: (e: BaseEvent<'bindfocus', TextareaFocusEvent>) => void;

输入框聚焦时的回调

bindblur

export interface TextareaBlurEvent {
  value: string;
}
bindblur?: (e: BaseEvent<'bindblur', TextareaBlurEvent>) => void;

输入框失去焦点时的回调

bindconfirm

export interface TextareaConfirmEvent {
  value: string;
}
bindconfirm?: (e: BaseEvent<'bindconfirm', TextareaConfirmEvent>) => void;

点击软键盘回车时的回调

bindinput

export interface TextareaTextareaEvent {
  value: string;
  selectionStart: number;
  selectionEnd: number;
  isComposing?: boolean;
}
bindinput?: (e: BaseEvent<'bindinput', TextareaTextareaEvent>) => void;

输入框内容变化的回调

bindselection

export interface TextareaSelectionEvent {
  selectionStart: number;
  selectionEnd: number;
}
bindselection?: (e: BaseEvent<'bindselection', TextareaSelectionEvent>) => void;

输入框光标变化的回调

方法

前端可以通过 SelectorQuery API 执行元件的方法。

focus

export interface TextareaFocusMethod extends BaseMethod {
  method: 'focus';
}

控制输入框主动聚焦

blur

export interface TextareaBlurMethod extends BaseMethod {
  method: 'blur';
}

控制输入框主动取消聚焦

getValue

export interface TextareaGetValueMethod extends BaseMethod {
  method: 'getValue';
  success?: Callback<{
    value: string;
    selectionStart: number;
    selectionEnd: number;
    isComposing: boolean;
  }>;
}

获取输入框的内容

setValue

export interface TextareaSetValueMethod extends BaseMethod {
  method: 'setValue';
  params: {
    value: string;
  };
}

主动设置输入框的内容

setSelectionRange

export interface TextareaSetSelectionRangeMethod extends BaseMethod {
  method: 'setSelectionRange';
  params: {
    selectionStart: number;
    selectionEnd: number;
  };
}

主动设置输入框的光标

兼容性

LCD tables only load in the browser

除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。