• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 监听输入框事件
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @kangshihui-->
5<!--Designer: @pssea-->
6<!--Tester: @jiaoaozihao-->
7<!--Adviser: @HelloCrease-->
8
9输入框包含多种交互行为，开发者可注册事件监听并获取状态。
10
11要实现实时搜索功能，可注册[NODE_TEXT_AREA_ON_CHANGE](../../application-dev/reference/apis-arkui/capi-native-node-h.md#arkui_nodeeventtype)事件，输入框文本发生变化时会收到通知，并能获取当前文本内容。
12
13要实现文字过滤功能，可注册[NODE_TEXT_AREA_ON_WILL_INSERT](../../application-dev/reference/apis-arkui/capi-native-node-h.md#arkui_nodeeventtype)事件，在文字即将插入前会收到通知，通过返回值控制文字是否插入。
14
15要实现用户编辑文字前后页面布局的不同，可注册[NODE_TEXT_AREA_ON_EDIT_CHANGE](../../application-dev/reference/apis-arkui/capi-native-node-h.md#arkui_nodeeventtype)事件，输入框编辑状态切换时会收到通知。
16
17以下示例基于[接入ArkTS页面章节](../ui/ndk-access-the-arkts-page.md)，说明如何监听输入框的事件及数据解析。
18
19- 注册事件
20
21    事件注册有统一接口，详情请参见[registerNodeEvent](../../application-dev/reference/apis-arkui/capi-arkui-nativemodule-arkui-nativenodeapi-1.md#registernodeevent)。输入框支持的事件类型，请参见[NativeNode组件支持的事件类型定义](../../application-dev/reference/apis-arkui/capi-native-node-h.md#arkui_nodeeventtype)，搜索前缀NODE_TEXT_AREA_。
22
23    ```c++
24    // 创建两个文本组件，展示事件内收到的信息。
25    ArkUI_NodeHandle text = nodeApi->createNode(ARKUI_NODE_TEXT);
26    ArkUI_NumberValue textWidth[] = {{.f32 = 300}};
27    ArkUI_AttributeItem textWidthItem = {.value = textWidth, .size = 1};
28    nodeApi->setAttribute(text, NODE_WIDTH, &textWidthItem);
29
30    ArkUI_NodeHandle selectionText = nodeApi->createNode(ARKUI_NODE_TEXT);
31    ArkUI_NumberValue selectionTextWidth[] = {{.f32 = 300}};
32    ArkUI_AttributeItem selectionTextWidthItem = {.value = selectionTextWidth, .size = 1};
33    nodeApi->setAttribute(selectionText, NODE_WIDTH, &selectionTextWidthItem);
34
35    const ArkUI_AttributeItem *attributeItem = nodeApi->getAttribute(textArea, NODE_UNIQUE_ID);
36    // 组件id作为targetid来区分不同组件的事件。
37    auto id = attributeItem->value[0].i32;
38    // 注册文本变化事件
39    nodeApi->registerNodeEvent(textArea, NODE_TEXT_AREA_ON_CHANGE, id, text);
40    // 注册粘贴事件
41    nodeApi->registerNodeEvent(textArea, NODE_TEXT_AREA_ON_PASTE, id, text);
42    // 注册文本选择事件
43    nodeApi->registerNodeEvent(textArea, NODE_TEXT_AREA_ON_TEXT_SELECTION_CHANGE, id, selectionText);
44    ```
45
46- 注册事件回调
47
48    事件回调注册有统一接口，详情请参见[registerNodeEventReceiver](../../application-dev/reference/apis-arkui/capi-arkui-nativemodule-arkui-nativenodeapi-1.md#registernodeeventreceiver)。
49
50    ```c++
51    nodeApi->registerNodeEventReceiver([](ArkUI_NodeEvent *event) {
52        ArkUI_NodeEventType eventType = OH_ArkUI_NodeEvent_GetEventType(event);
53        ArkUI_AttributeItem content;
54        // 文本内容变化事件和粘贴事件
55        if (eventType == NODE_TEXT_AREA_ON_CHANGE || eventType == NODE_TEXT_AREA_ON_PASTE) {
56            // 获取文本内容
57            ArkUI_StringAsyncEvent *stringEvent = OH_ArkUI_NodeEvent_GetStringAsyncEvent(event);
58            content = {.string = stringEvent->pStr };
59        } else if (eventType == NODE_TEXT_AREA_ON_TEXT_SELECTION_CHANGE) {
60            // 获取选中的文字的索引值，起始索引和结束索引，根据此获取用户选中的文字
61            ArkUI_NodeComponentEvent *componentEvent = OH_ArkUI_NodeEvent_GetNodeComponentEvent(event);
62            std::stringstream selectContent;
63            selectContent << "start: " << componentEvent->data[0].i32 << " , end: " << componentEvent->data[1].i32;
64            content = {.string = selectContent.str().c_str() };
65        } else {
66            return;
67        }
68        ArkUI_NodeHandle textNode = reinterpret_cast<ArkUI_NodeHandle>(OH_ArkUI_NodeEvent_GetUserData(event));
69        if (textNode) {
70            // 将文本信息展示在Text组件上。
71            ArkUI_NativeNodeAPI_1 *nodeApi = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>(
72                OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNodeAPI_1"));
73            nodeApi->setAttribute(textNode, NODE_TEXT_CONTENT, &content);
74        }
75    });
76    ```
77- 完整示例
78
79   本篇示例仅提供核心接口的调用方法，完整的示例工程请参考<!--RP1-->[TextAreaEventNDK](https://gitcode.com/openharmony/applications_app_samples/tree/master/code/DocsSample/ArkUISample/TextAreaEventNDK)<!--RP1End-->。
80
81    ```c++
82    #include <arkui/native_interface.h>
83
84    void NodeManager::CreateTextAreaNode() {
85        ArkUI_NativeNodeAPI_1 *nodeApi = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>(
86            OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNodeAPI_1"));
87        if (nodeApi == nullptr) {
88            return;
89        }
90        ArkUI_NodeHandle column = nodeApi->createNode(ARKUI_NODE_COLUMN);
91        ArkUI_NumberValue colWidth[] = {{.f32 = 300}};
92        ArkUI_AttributeItem widthItem = {.value = colWidth, .size = 1};
93        nodeApi->setAttribute(column, NODE_WIDTH, &widthItem);
94
95        ArkUI_NodeHandle text = nodeApi->createNode(ARKUI_NODE_TEXT);
96        ArkUI_NumberValue textWidth[] = {{.f32 = 300}};
97        ArkUI_AttributeItem textWidthItem = {.value = textWidth, .size = 1};
98        nodeApi->setAttribute(text, NODE_WIDTH, &textWidthItem);
99        nodeApi->addChild(column, text);
100
101        ArkUI_NodeHandle selectionText = nodeApi->createNode(ARKUI_NODE_TEXT);
102        ArkUI_NumberValue selectionTextWidth[] = {{.f32 = 300}};
103        ArkUI_AttributeItem selectionTextWidthItem = {.value = selectionTextWidth, .size = 1};
104        nodeApi->setAttribute(selectionText, NODE_WIDTH, &selectionTextWidthItem);
105        nodeApi->addChild(column, selectionText);
106
107        ArkUI_NodeHandle textArea = nodeApi->createNode(ARKUI_NODE_TEXT_AREA);
108        ArkUI_NumberValue textAreaWidth[] = {{.f32 = 300}};
109        ArkUI_AttributeItem textAreaWidthItem = {.value = textAreaWidth, .size = 1};
110        nodeApi->setAttribute(textArea, NODE_WIDTH, &textAreaWidthItem);
111
112        ArkUI_NumberValue borderWidth[] = {{.f32 = 1}};
113        ArkUI_AttributeItem borderWidthItem = {.value = borderWidth, .size = 1};
114        nodeApi->setAttribute(textArea, NODE_BORDER_WIDTH, &borderWidthItem);
115
116        const ArkUI_AttributeItem *attributeItem = nodeApi->getAttribute(textArea, NODE_UNIQUE_ID);
117        auto id = attributeItem->value[0].i32;
118        nodeApi->registerNodeEvent(textArea, NODE_TEXT_AREA_ON_CHANGE, id, text);
119        nodeApi->registerNodeEvent(textArea, NODE_TEXT_AREA_ON_PASTE, id, text);
120        nodeApi->registerNodeEvent(textArea, NODE_TEXT_AREA_ON_TEXT_SELECTION_CHANGE, id, selectionText);
121        nodeApi->registerNodeEventReceiver([](ArkUI_NodeEvent *event) {
122            ArkUI_NodeEventType eventType = OH_ArkUI_NodeEvent_GetEventType(event);
123            ArkUI_AttributeItem content;
124            if (eventType == NODE_TEXT_AREA_ON_CHANGE || eventType == NODE_TEXT_AREA_ON_PASTE) {
125                ArkUI_StringAsyncEvent *stringEvent = OH_ArkUI_NodeEvent_GetStringAsyncEvent(event);
126                content = {.string = stringEvent->pStr };
127            } else if (eventType == NODE_TEXT_AREA_ON_TEXT_SELECTION_CHANGE) {
128                ArkUI_NodeComponentEvent *componentEvent = OH_ArkUI_NodeEvent_GetNodeComponentEvent(event);
129                std::stringstream selectContent;
130                selectContent << "start: " << componentEvent->data[0].i32 << " , end: " << componentEvent->data[1].i32;
131                content = {.string = selectContent.str().c_str() };
132            } else {
133                return;
134            }
135            ArkUI_NodeHandle textNode = reinterpret_cast<ArkUI_NodeHandle>(OH_ArkUI_NodeEvent_GetUserData(event));
136            if (textNode) {
137                ArkUI_NativeNodeAPI_1 *nodeApi = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>(
138                    OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNodeAPI_1"));
139                nodeApi->setAttribute(textNode, NODE_TEXT_CONTENT, &content);
140            }
141        });
142        nodeApi->addChild(column, textArea);
143        OH_NativeXComponent_AttachNativeRootNode(xComponent, column);
144    }
145    ```
146
147![textarea_getstringevent](figures/textarea_getstringevent.gif)