1# Listening for Text Box Events 2 3Text boxes support various interactive behaviors, allowing you to register event listeners and obtain status information. 4 5Real-time search: Register the [NODE_TEXT_AREA_ON_CHANGE](../../application-dev/reference/apis-arkui/_ark_u_i___native_module.md) event to receive notifications and obtain the current text content when the text box input changes. 6 7Text filtering: Register the [NODE_TEXT_AREA_ON_WILL_INSERT](../../application-dev/reference/apis-arkui/_ark_u_i___native_module.md) event to receive notifications before text is inserted and control whether to insert text through the return value. 8 9Layout changes during editing: Register the [NODE_TEXT_AREA_ON_EDIT_CHANGE](../../application-dev/reference/apis-arkui/_ark_u_i___native_module.md) event to receive notifications when the text box editing state changes. 10 11The following example demonstrates how to listen for text box events and parse data based on the [Integrating with ArkTS Pages](../ui/ndk-access-the-arkts-page.md) section. 12 13- Registering Events 14 15 Events are registered through a unified API. For details, see [registerNodeEvent](../../application-dev/reference/apis-arkui/_ark_u_i___native_node_a_p_i__1.md#registernodeevent). For details about the event types supported by the text box, see the [ArkUI_NodeEventType](../../application-dev/reference/apis-arkui/_ark_u_i___native_module.md) section, searching for **NODE_TEXT_AREA_**. 16 17 ```c++ 18 // Create two text components to display the information received in events. 19 ArkUI_NodeHandle text = nodeApi->createNode(ARKUI_NODE_TEXT); 20 ArkUI_NumberValue textWidth[] = {{.f32 = 300}}; 21 ArkUI_AttributeItem textWidthItem = {.value = textWidth, .size = 1}; 22 nodeApi->setAttribute(text, NODE_WIDTH, &textWidthItem); 23 24 ArkUI_NodeHandle selectionText = nodeApi->createNode(ARKUI_NODE_TEXT); 25 ArkUI_NumberValue selectionTextWidth[] = {{.f32 = 300}}; 26 ArkUI_AttributeItem selectionTextWidthItem = {.value = selectionTextWidth, .size = 1}; 27 nodeApi->setAttribute(selectionText, NODE_WIDTH, &selectionTextWidthItem); 28 29 const ArkUI_AttributeItem *attributeItem = nodeApi->getAttribute(textArea, NODE_UNIQUE_ID); 30 // Use the component ID as the target ID to distinguish events from different components. 31 auto id = attributeItem->value[0].i32; 32 // Register the text change event. 33 nodeApi->registerNodeEvent(textArea, NODE_TEXT_AREA_ON_CHANGE, id, text); 34 // Register the paste event. 35 nodeApi->registerNodeEvent(textArea, NODE_TEXT_AREA_ON_PASTE, id, text); 36 // Register the text selection event. 37 nodeApi->registerNodeEvent(textArea, NODE_TEXT_AREA_ON_TEXT_SELECTION_CHANGE, id, selectionText); 38 ``` 39 40- Registering Event Callbacks 41 42 Event callbacks are registered through a unified API. For details, see [registerNodeEventReceiver](../../application-dev/reference/apis-arkui/_ark_u_i___native_node_a_p_i__1.md#registernodeeventreceiver). 43 44 ```c++ 45 nodeApi->registerNodeEventReceiver([](ArkUI_NodeEvent *event) { 46 ArkUI_NodeEventType eventType = OH_ArkUI_NodeEvent_GetEventType(event); 47 ArkUI_AttributeItem content; 48 // Text content change event and paste event 49 if (eventType == NODE_TEXT_AREA_ON_CHANGE || eventType == NODE_TEXT_AREA_ON_PASTE) { 50 // Obtain the text content. 51 ArkUI_StringAsyncEvent *stringEvent = OH_ArkUI_NodeEvent_GetStringAsyncEvent(event); 52 content = {.string = stringEvent->pStr }; 53 } else if (eventType == NODE_TEXT_AREA_ON_TEXT_SELECTION_CHANGE) { 54 //Obtain the indices of the selected text (start and end indices) to obtain the selected text. 55 ArkUI_NodeComponentEvent *componentEvent = OH_ArkUI_NodeEvent_GetNodeComponentEvent(event); 56 std::stringstream selectContent; 57 selectContent << "start: " << componentEvent->data[0].i32 << " , end: " << componentEvent->data[1].i32; 58 content = {.string = selectContent.str().c_str() }; 59 } else { 60 return; 61 } 62 ArkUI_NodeHandle textNode = reinterpret_cast<ArkUI_NodeHandle>(OH_ArkUI_NodeEvent_GetUserData(event)); 63 if (textNode) { 64 // Display the text information on the Text component. 65 ArkUI_NativeNodeAPI_1 *nodeApi = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>( 66 OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNodeAPI_1")); 67 nodeApi->setAttribute(textNode, NODE_TEXT_CONTENT, &content); 68 } 69 }); 70 ``` 71- Sample Code 72 ```c++ 73 void NodeManager::CreateTextAreaNode() { 74 ArkUI_NativeNodeAPI_1 *nodeApi = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>( 75 OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNodeAPI_1")); 76 if (nodeApi == nullptr) { 77 return; 78 } 79 ArkUI_NodeHandle column = nodeApi->createNode(ARKUI_NODE_COLUMN); 80 ArkUI_NumberValue colWidth[] = {{.f32 = 300}}; 81 ArkUI_AttributeItem widthItem = {.value = colWidth, .size = 1}; 82 nodeApi->setAttribute(column, NODE_WIDTH, &widthItem); 83 84 ArkUI_NodeHandle text = nodeApi->createNode(ARKUI_NODE_TEXT); 85 ArkUI_NumberValue textWidth[] = {{.f32 = 300}}; 86 ArkUI_AttributeItem textWidthItem = {.value = textWidth, .size = 1}; 87 nodeApi->setAttribute(text, NODE_WIDTH, &textWidthItem); 88 nodeApi->addChild(column, text); 89 90 ArkUI_NodeHandle selectionText = nodeApi->createNode(ARKUI_NODE_TEXT); 91 ArkUI_NumberValue selectionTextWidth[] = {{.f32 = 300}}; 92 ArkUI_AttributeItem selectionTextWidthItem = {.value = selectionTextWidth, .size = 1}; 93 nodeApi->setAttribute(selectionText, NODE_WIDTH, &selectionTextWidthItem); 94 nodeApi->addChild(column, selectionText); 95 96 ArkUI_NodeHandle textArea = nodeApi->createNode(ARKUI_NODE_TEXT_AREA); 97 ArkUI_NumberValue textAreaWidth[] = {{.f32 = 300}}; 98 ArkUI_AttributeItem textAreaWidthItem = {.value = textAreaWidth, .size = 1}; 99 nodeApi->setAttribute(textArea, NODE_WIDTH, &textAreaWidthItem); 100 101 ArkUI_NumberValue borderWidth[] = {{.f32 = 1}}; 102 ArkUI_AttributeItem borderWidthItem = {.value = borderWidth, .size = 1}; 103 nodeApi->setAttribute(textArea, NODE_BORDER_WIDTH, &borderWidthItem); 104 105 const ArkUI_AttributeItem *attributeItem = nodeApi->getAttribute(textArea, NODE_UNIQUE_ID); 106 auto id = attributeItem->value[0].i32; 107 nodeApi->registerNodeEvent(textArea, NODE_TEXT_AREA_ON_CHANGE, id, text); 108 nodeApi->registerNodeEvent(textArea, NODE_TEXT_AREA_ON_PASTE, id, text); 109 nodeApi->registerNodeEvent(textArea, NODE_TEXT_AREA_ON_TEXT_SELECTION_CHANGE, id, selectionText); 110 nodeApi->registerNodeEventReceiver([](ArkUI_NodeEvent *event) { 111 ArkUI_NodeEventType eventType = OH_ArkUI_NodeEvent_GetEventType(event); 112 ArkUI_AttributeItem content; 113 if (eventType == NODE_TEXT_AREA_ON_CHANGE || eventType == NODE_TEXT_AREA_ON_PASTE) { 114 ArkUI_StringAsyncEvent *stringEvent = OH_ArkUI_NodeEvent_GetStringAsyncEvent(event); 115 content = {.string = stringEvent->pStr }; 116 } else if (eventType == NODE_TEXT_AREA_ON_TEXT_SELECTION_CHANGE) { 117 ArkUI_NodeComponentEvent *componentEvent = OH_ArkUI_NodeEvent_GetNodeComponentEvent(event); 118 std::stringstream selectContent; 119 selectContent << "start: " << componentEvent->data[0].i32 << " , end: " << componentEvent->data[1].i32; 120 content = {.string = selectContent.str().c_str() }; 121 } else { 122 return; 123 } 124 ArkUI_NodeHandle textNode = reinterpret_cast<ArkUI_NodeHandle>(OH_ArkUI_NodeEvent_GetUserData(event)); 125 if (textNode) { 126 ArkUI_NativeNodeAPI_1 *nodeApi = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>( 127 OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNodeAPI_1")); 128 nodeApi->setAttribute(textNode, NODE_TEXT_CONTENT, &content); 129 } 130 }); 131 nodeApi->addChild(column, textArea); 132 OH_NativeXComponent_AttachNativeRootNode(xComponent, column); 133 } 134 ``` 135 136 137