Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
ea727c4c
D
Docs
项目概览
OpenHarmony
/
Docs
大约 1 年 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
未验证
提交
ea727c4c
编写于
10月 12, 2022
作者:
L
luoying_ace
提交者:
Gitee
10月 12, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md.
Signed-off-by:
N
luoying_ace
<
luoying19@huawei.com
>
上级
bb190769
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
26 addition
and
54 deletion
+26
-54
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
...on-dev/reference/arkui-ts/ts-basic-components-textarea.md
+26
-54
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
浏览文件 @
ea727c4c
# TextArea
可以输入多行文本并支持响应部分输入事件的组件
。
多行文本输入框组件,当输入的文本内容超过组件宽度时会自动换行显示
。
> **说明:**
>
...
...
@@ -20,7 +20,7 @@ TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Tex
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----------------------- | ---------------------------------------- | ---- | -------------- |
| placeholder |
[
ResourceStr
](
ts-types.md#resourcestr
)
| 否 | 无输入时的提示文本。 |
| placeholder |
[
ResourceStr
](
ts-types.md#resourcestr
)
| 否 |
设置
无输入时的提示文本。 |
| text |
[
ResourceStr
](
ts-types.md#resourcestr
)
| 否 | 设置输入框当前的文本内容。 |
| controller
<sup>
8+
</sup>
|
[
TextAreaController
](
#textareacontroller8
)
| 否 | 设置TextArea控制器。 |
...
...
@@ -33,10 +33,10 @@ TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Tex
| ------------------------ | ---------------------------------------- | ---------------------------------------- |
| placeholderColor |
[
ResourceColor
](
ts-types.md#resourcecolor
)
| 设置placeholder文本颜色。 |
| placeholderFont |
[
Font
](
ts-types.md#font
)
| 设置placeholder文本样式。 |
| textAlign |
[
TextAlign
](
ts-appendix-enums.md#textalign
)
| 设置文本水平对齐式。
<br/>
默认值:TextAlign.Start |
| textAlign |
[
TextAlign
](
ts-appendix-enums.md#textalign
)
| 设置文本
在输入框中的
水平对齐式。
<br/>
默认值:TextAlign.Start |
| caretColor |
[
ResourceColor
](
ts-types.md#resourcecolor
)
| 设置输入框光标颜色。 |
| inputFilter
<sup>
8+
</sup>
| {
<br/>
value:
[ResourceStr](ts-types.md#resourcestr),
<br/>
error?:
(value:
string) => void
<br/>
} | 通过正则表达式设置输入过滤器。
满足表达式的输入允许显示,不满足的输入被忽略。仅支持单个字符匹配,不支持字符串匹配。例如:^(?=.
\*\d
)(?=.
\*
[a-z])(?=.
\*
[A-Z]).{8,10}$,不支持过滤8到10位的强密码。
<br/>
-
value:设置正则表达式。
<br/>
-
error:正则匹配失败时,返回被忽略
的内容。 |
| copyOption
<sup>
9+
</sup>
|
[
CopyOptions
](
ts-appendix-enums.md#copyoptions9
)
| 设置文本是否可复制。 |
| inputFilter
<sup>
8+
</sup>
| {
<br/>
value:
[ResourceStr](ts-types.md#resourcestr),
<br/>
error?:
(value:
string) => void
<br/>
} | 通过正则表达式设置输入过滤器。
匹配表达式的输入允许显示,不匹配的输入将被过滤。仅支持单个字符匹配,不支持字符串匹配。
<br/>
-
value:设置正则表达式。
<br/>
-
error:正则匹配失败时,返回被过滤
的内容。 |
| copyOption
<sup>
9+
</sup>
|
[
CopyOptions
](
ts-appendix-enums.md#copyoptions9
)
| 设置
输入的
文本是否可复制。 |
## 事件
...
...
@@ -45,14 +45,14 @@ TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Tex
| 名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onChange(callback:
(value:
string)
=
>
void) | 输入
发生变化时,触发回调。
|
| onCopy
<sup>
8+
</sup>
(callback:(value:
string)
=
>
void) | 长按输入框内部区域弹出剪贴板后,点击剪切板复制按钮,触发回调。
<br/>
- value:复制的文本内容。 |
| onCut
<sup>
8+
</sup>
(callback:(value:
string)
=
>
void) | 长按输入框内部区域弹出剪贴板后,点击剪切板剪切按钮,触发回调。
<br/>
- value:剪切的文本内容。 |
| onPaste
<sup>
8+
</sup>
(callback:(value:
string)
=
>
void) | 长按输入框内部区域弹出剪贴板后,点击剪切板粘贴按钮,触发回调。
<br/>
- value:粘贴的文本内容。 |
| onChange(callback:
(value:
string)
=
>
void) | 输入
内容发生变化时,触发该回调。
<br/>
- value:当前输入的文本内容。
|
| onCopy
<sup>
8+
</sup>
(callback:(value:
string)
=
>
void) | 长按输入框内部区域弹出剪贴板后,点击剪切板复制按钮,触发
该
回调。
<br/>
- value:复制的文本内容。 |
| onCut
<sup>
8+
</sup>
(callback:(value:
string)
=
>
void) | 长按输入框内部区域弹出剪贴板后,点击剪切板剪切按钮,触发
该
回调。
<br/>
- value:剪切的文本内容。 |
| onPaste
<sup>
8+
</sup>
(callback:(value:
string)
=
>
void) | 长按输入框内部区域弹出剪贴板后,点击剪切板粘贴按钮,触发
该
回调。
<br/>
- value:粘贴的文本内容。 |
## TextAreaController<sup>8+</sup>
TextArea组件的控制器,
通过它操作TextArea组件
。
TextArea组件的控制器,
目前可通过它设置TextArea组件的光标位置
。
### 导入对象
...
...
@@ -82,56 +82,28 @@ caretPosition(value: number): void
// xxx.ets
@
Entry
@
Component
struct
TextAreaExample1
{
controller
:
TextAreaController
=
new
TextAreaController
()
struct
TextAreaExample
{
@
State
text
:
string
=
''
controller
:
TextAreaController
=
new
TextAreaController
()
build
()
{
Column
()
{
TextArea
({
placeholder
:
'
input your word
'
,
controller
:
this
.
controller
})
.
placeholderColor
(
"
rgb(0,0,225)
"
)
.
placeholderFont
({
size
:
30
,
weight
:
100
,
family
:
'
cursive
'
,
style
:
FontStyle
.
Italic
})
.
textAlign
(
TextAlign
.
Center
)
.
caretColor
(
Color
.
Blue
)
.
height
(
50
)
.
fontSize
(
30
)
.
fontWeight
(
FontWeight
.
Bold
)
.
fontFamily
(
"
sans-serif
"
)
.
fontStyle
(
FontStyle
.
Normal
)
.
fontColor
(
Color
.
Red
)
.
inputFilter
(
'
^[
\
u4E00-
\
u9FA5A-Za-z0-9_]+$
'
,(
value
:
string
)
=>
{
console
.
info
(
"
hyb
"
+
value
)
})
TextArea
({
placeholder
:
'
input your word
'
,
controller
:
this
.
controller
})
.
placeholderFont
({
size
:
14
,
weight
:
400
})
.
width
(
400
)
.
margin
(
20
)
.
fontSize
(
14
)
.
onChange
((
value
:
string
)
=>
{
this
.
text
=
value
this
.
controller
.
caretPosition
(
-
1
)
})
Text
(
this
.
text
).
width
(
'
90%
'
)
}
Text
(
this
.
text
)
Button
(
'
Set caretPosition 1
'
)
.
margin
(
15
)
.
onClick
(()
=>
{
// 设置光标位置到第一个字符后
this
.
controller
.
caretPosition
(
1
)
})
}.
width
(
'
100%
'
)
}
}
```
![
zh-cn_image_0000001251087311
](
figures/zh-cn_image_0000001251087311.gif
)
### 设置光标
```
ts
// xxx.ets
@
Entry
@
Component
struct
TextAreaExample2
{
controller
:
TextAreaController
=
new
TextAreaController
()
build
()
{
Column
()
{
TextArea
({
placeholder
:
'
input your word
'
,
controller
:
this
.
controller
})
Button
(
'
caretPosition
'
)
.
onClick
(()
=>
{
this
.
controller
.
caretPosition
(
4
)
})
}
}
}
```
![
zh-cn_image_0000001252653499
](
figures/zh-cn_image_0000001252653499.png
)
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录