Data processing method and device
By calling out the prompt box to prompt rich text data in the input box and replacing it with rich text data with display style, the problems of low efficiency of data input and monotonous visual effects are solved, and efficient and outstanding data input and recognition are achieved.
Patent Information
- Application Number
- CN202510306017.8
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-03-14
- Publication Date
- 2025-07-11
AI Technical Summary
In the prior art, input frame data input is inefficient and visual effects are monotonous, making it difficult for users to quickly locate input data.
通过监测输入框中的提及字符,唤出提示框提示富文本数据,用户选择后获取显示样式数据并替换为富文本数据。
It improves data input efficiency, highlights visual effects, facilitates user search and recognition, and improves interactive experience.
Smart Images

Figure CN120295533A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the technical field of data processing, and in particular, to a data processing method and apparatus. Background Art
[0002] The input box in the front-end interface is a key component for users to interact with applications or browsers, and is mainly used to collect and submit data input by users.
[0003] Currently, the data collected and submitted by the input box is usually manually input by users. There are the following two defects in the way of manually inputting data: First, the manual input speed is slow, resulting in low data input efficiency; Second, limited by the way of manual input, the input data is usually pure text data. In this way, after the data is input into the input box, the visual effect of the data is monotonous, and it is difficult for users to quickly visually locate the input data in the front-end interface.
[0004] Therefore, how to efficiently input data with prominent visual effects into the input box has become an urgent problem to be solved. Summary of the Invention
[0005] This application proposes a data processing method and apparatus, and the main purpose is to efficiently input data with prominent visual effects into the input box.
[0006] To achieve the above object, this application mainly provides the following technical solutions:
[0007] In a first aspect, this application provides a data processing method, which may include: If it is monitored that at least one target mention character is input in any target input box of the front-end interface, at least one hint box is used to hint rich text data corresponding to at least part of the target mention characters, and the rich text data is data applicable to the service supported by the front-end interface and allowed to be input into the target input box; If there is selected target rich text data in the hinted rich text data, obtain target display style data applicable to the target rich text data, and the display style indicated by the target display style data is used to reflect the data type of the target rich text data; Based on the target display style data, replace the corresponding target mention characters in the target input box with the target rich text data having the corresponding display style.
[0008] In some embodiments of the present application, the data processing method provided in this embodiment may further include: selecting a target input box from the input boxes included in the front-end interface, where the target input box is an input box that needs to input rich text data based on the mentioned characters and is set as a block-level element with the content editable attribute; for each selected target input box, respectively execute: configuring at least one preset display style data as the attribute value of the corresponding content editable attribute of the target input box, so that the target input box set as a block-level element can display the rich text data in the display style indicated by the preset display style data based on the attribute value of the content editable attribute.
[0009] In some embodiments of the present application, the data processing method provided in this embodiment may further include: if there are abnormal mentioned characters among the at least one target mentioned characters, where the abnormal mentioned characters are the target mentioned characters in the input box that have not been successfully replaced with the target rich text data with the corresponding display style based on the corresponding target display style data, then incrementally add the corresponding target display style data as the attribute value of the corresponding content editable attribute of the target input box; after the incremental addition is successful, execute the step of replacing the abnormal mentioned characters in the target input box with the target rich text data with the corresponding display style based on the corresponding target display style data.
[0010] In some embodiments of the present application, obtaining the target display style data applicable to the target rich text data includes: if it is determined that the user currently using the front-end interface used the display style data customized by the user for the target rich text data the last time the front-end interface was used, then obtain the display style data customized by the user as the target display style data applicable to the target rich text data.
[0011] In some embodiments of the present application, each piece of rich text data has corresponding default display style data. Then, obtaining the target display style data applicable to the target rich text data includes: obtaining the corresponding default display style data of the target rich text data as the target display style data applicable to the target rich text data.
[0012] In some embodiments of the present application, before the rich text data corresponding to the target mentioned character is prompted through a prompt box, the data processing method provided in this embodiment may further include: determining a positioning reference coordinate for displaying the prompt box, where the positioning reference coordinate is the coordinate corresponding to the cursor of the target mentioned character in a target coordinate system, or the positioning reference coordinate is the coordinate corresponding to the target vertex of the target input box in the target coordinate system, and the target coordinate system is the screen coordinate system of the screen displaying the front-end interface; based on the positioning reference coordinate and the size data of the prompt box, determining the vertex coordinate corresponding to a specified vertex in the prompt box in the target coordinate system, where the vertex coordinate satisfies that the target input box is not blocked after the prompt box is displayed; determining the display area of the prompt box based on the vertex coordinate and the size data setting.
[0013] In some embodiments of the present application, before the rich text data corresponding to the target mentioned character is prompted through a prompt box, the data processing method provided in this embodiment may further include: determining a positioning reference coordinate for displaying the prompt box, where the positioning reference coordinate is the coordinate corresponding to the cursor of the target mentioned character in a target coordinate system, or the positioning reference coordinate is the coordinate corresponding to the target vertex of the target input box in the target coordinate system, and the target coordinate system is the screen coordinate system of the screen displaying the front-end interface; if the positioning reference coordinate is not within the main display area for displaying the prompt box in the screen coordinate system, then determining the main display area as the display area of the prompt box; if the positioning reference coordinate is within the main display area, then determining the alternate display area for displaying the prompt box in the screen coordinate system as the display area of the prompt box, and the alternate display area does not overlap with the main display area.
[0014] In some embodiments of the present application, before the rich text data corresponding to the target mentioned character is prompted through a prompt box, the data processing method provided in this embodiment may further include: obtaining target prompt box style data corresponding to the user information of the user currently using the front-end interface, where each type of user information has corresponding prompt box style data; constructing a prompt box with the appearance style indicated by the target prompt box style data.
[0015] In some embodiments of the present application, before the rich text data corresponding to the target mentioned character is prompted by a prompt box, the data processing method provided in this embodiment may further include: if it is monitored that the user currently using the front-end interface has customized personalized prompt box style data, a prompt box with the appearance style indicated by the personalized prompt box style data is constructed; if it is monitored that the user currently using the front-end interface has not customized personalized prompt box style data, preset default prompt box style data is obtained, and a prompt box with the appearance style indicated by the default prompt box style data is constructed.
[0016] In some embodiments of the present application, prompting the rich text data corresponding to at least some of the target mentioned characters through at least one prompt box includes: for each of the target mentioned characters, respectively: calling out the corresponding prompt box for the target mentioned character, and prompting the rich text data corresponding to the target mentioned character through the called-out prompt box.
[0017] In some embodiments of the present application, prompting the rich text data corresponding to at least some of the target mentioned characters through at least one prompt box includes: if there is at least one first mentioned character in the target input box for which the prompt box has not been called out, when the cursor is again located after any one of the first mentioned characters, calling out the corresponding prompt box for any one of the first mentioned characters, and prompting the rich text data corresponding to any one of the first mentioned characters through the called-out prompt box.
[0018] In some embodiments of the present application, prompting the rich text data corresponding to at least some of the target mentioned characters through at least one prompt box includes: calling out the corresponding prompt box for the second mentioned character input into the target prompt box by using the target input event among the at least one target mentioned character, and prompting the rich text data corresponding to the second mentioned character through the called-out prompt box.
[0019] In some embodiments of the present application, before the rich text data corresponding to at least some of the target mentioned characters is prompted through at least one prompt box, the method further includes: determining the prompt data for each rich text data corresponding to the at least some of the target mentioned characters, so as to prompt the rich text data corresponding to at least some of the target mentioned characters through the at least one prompt box based on the prompt data, and the prompt data is obtained by abstracting the rich text data.
[0020] In some embodiments of the present application, the data processing method provided in this embodiment may further include: for each target input box included in the front-end interface, respectively execute: if an input event related to the input in the input box is monitored for the front-end interface, search for a preset mention character in the data input in the target input box; if the preset mention character is found, it is monitored that a target mention character is input in the target input box, and the target mention character is the preset mention character in the input data.
[0021] In some embodiments of the present application, the prompt box includes a filtering box, then, the data processing method provided in this embodiment may further include: if it is monitored that a character is input in the filtering box, filter out candidate rich text data including the input character from the rich text data corresponding to the target mention character, and retain the prompt of the candidate rich text data in the prompt box.
[0022] In some embodiments of the present application, after replacing the corresponding target mention character in the target input box with target rich text data having a corresponding display style based on the target display style data, the data processing method provided in this embodiment may further include: if it is monitored that the target input box does not undergo a blur event, move the cursor in the target input box to the back of the target rich text data.
[0023] In some embodiments of the present application, after replacing the corresponding target mention character in the target input box with target rich text data having a corresponding display style based on the target display style data, the data processing method provided in this embodiment may further include: if a send instruction for instructing to send the data in the target input box to the back-end corresponding to the front-end interface is received, convert the data in the target input box into plain text data, and send the plain text data and the data type of the data in the target input box to the back-end, so that the back-end performs corresponding service processing on the plain text data based on the data type.
[0024] In some embodiments of the present application, the data processing method provided in this embodiment may further include: if a customization instruction for at least one mention character is obtained, for each of the mention characters, respectively execute: determine the input box applicable to the mention character in the front-end interface, collect rich text data applicable to the services supported by the front-end interface and allowed to be input into the determined input box, and establish a correspondence between the mention character and the rich text data.
[0025] In a second aspect, the present application provides a data processing device. The data processing device provided in this embodiment may include:
[0026] A hint module, configured to, if it is detected that at least one target mention character is input in any target input box of the front-end interface, hint out rich text data corresponding to at least part of the target mention characters through at least one hint box, where the rich text data is data applicable to the service supported by the front-end interface and allowed to be input into the target input box;
[0027] An acquisition module, configured to, if there is selected target rich text data in the hint-out rich text data, acquire target display style data applicable to the target rich text data, where the display style indicated by the target display style data is used to reflect the data type of the target rich text data;
[0028] A replacement module, configured to, based on the target display style data, replace the corresponding target mention characters in the target input box with the target rich text data having the corresponding display style.
[0029] In a third aspect, the present application provides a computer-readable storage medium, where the storage medium includes a stored program, and wherein, when the program runs, it controls the device where the storage medium is located to execute the data processing method described in the first aspect.
[0030] In a fourth aspect, the present application provides an electronic device, where the electronic device includes: a memory, configured to store a program; a processor, coupled to the memory, configured to run the program to execute the data processing method described in the first aspect.
[0031] The data processing method and device provided by the present application, when it is detected that at least one target mention character is input in any target input box of the front-end interface, prompt rich text data corresponding to at least some of the target mention characters through at least one prompt box for the user to select. For the selected target rich text data, obtain the target display style data applicable to the target rich text data, and the display style indicated by the target display style data is used to reflect the data type of the target rich text data. Then, based on the target display style data, replace the corresponding target mention characters in the target input box with the target rich text data having the corresponding display style. It can be seen that the solution provided by the embodiments of the present application can at least achieve the following two effects: First, since there is no need for the user to manually input data into the input box, and the user can input the data that meets the user's needs into the input box through a selection operation, the efficiency of inputting data into the input box can be improved. Second, since the data finally input into the input box is rich text data with a display style, the visual effect of the data input into the input box can be highlighted, which is convenient for the user to search and identify, and thus the user's interaction experience is improved. Third, this embodiment supports calling out the prompt boxes corresponding to multiple target mention characters at the same time. In this way, when multiple mention characters that need to call out the prompt box are input in the input box, the prompt boxes corresponding to each mention character can be called out at the same time, so that the user can select the corresponding rich text data one by one from the prompt boxes corresponding to each mention character, thereby improving the data processing efficiency.
[0032] The above description is only an overview of the technical solution of the present application. In order to be able to understand the technical means of the present application more clearly, it can be implemented according to the content of the specification. And in order to make the above and other purposes, features and advantages of the present application more obvious and understandable, the following specifically illustrates the specific embodiments of the present application. Brief Description of the Drawings
[0033] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the following will briefly introduce the drawings required for the description of the embodiments or the prior art. Obviously, the following drawings are some embodiments of the present application. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained according to these drawings.
[0034] Figure 1 Shows a flowchart of a data processing method provided by an embodiment of the present application;
[0035] Figure 2 Shows one of the schematic diagrams of a front-end interface provided by an embodiment of the present application;
[0036] Figure 3 Shows another schematic diagram of a front-end interface provided by an embodiment of the present application;
[0037] Figure 4 Shows the third schematic diagram of a front-end interface provided by an embodiment of the present application;
[0038] Figure 5 Shows the fourth schematic diagram of a front-end interface provided by an embodiment of the present application;
[0039] Figure 6 Shows the fifth schematic diagram of a front-end interface provided by an embodiment of the present application;
[0040] Figure 7 Shows the sixth schematic diagram of a front-end interface provided by an embodiment of the present application;
[0041] Figure 8 Shows the seventh schematic diagram of a front-end interface provided by an embodiment of the present application;
[0042] Figure 9 Shows the eighth schematic diagram of a front-end interface provided by an embodiment of the present application;
[0043] Figure 10 Shows the ninth schematic diagram of a front-end interface provided by an embodiment of the present application;
[0044] Figure 11 Shows the tenth schematic diagram of a front-end interface provided by an embodiment of the present application;
[0045] Figure 12 Shows the eleventh schematic diagram of a front-end interface provided by an embodiment of the present application;
[0046] Figure 13 Shows the twelfth schematic diagram of a front-end interface provided by an embodiment of the present application;
[0047] Figure 14 Shows the flowchart of a data processing method provided by another embodiment of the present application;
[0048] Figure 15 Shows the structural schematic diagram of a data processing device provided by an embodiment of the present application;
[0049] Figure 16 Shows the structural schematic diagram of a data processing device provided by another embodiment of the present application. Detailed implementation manners
[0050] Exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided so that the present disclosure can be more thoroughly understood and the scope of the present disclosure can be completely conveyed to those skilled in the art.
[0051] Currently, the data collected and submitted by the input box on the front-end interface is usually manually input by the user. Manual input not only results in low input efficiency of the data, but also limits the input data to pure text data, resulting in a monotonous visual effect of the data after it is input into the input box, and it is difficult for the user to quickly visually locate the input data on the front-end interface.
[0052] Through research, it is found that if the user is allowed to input a mention character in the input box to call out the prompt box, and the prompt box prompts rich text data that is applicable to the services supported by the front-end interface and allowed to be input into the input box for the user to select, then after the user selects the rich text data, the display style data applicable to the selected rich text data can be obtained, and the mention character in the input box can be replaced with the rich text data with the display style indicated by the display style data, so as to complete the input of data into the input box. It can be seen that this way of inputting data into the input box can at least achieve the following two effects: First, since there is no need for the user to manually input data into the input box, and the user can achieve the input of data that meets the user's needs into the input box through a selection operation, the efficiency of inputting data into the input box can be improved. Second, since the data finally input into the input box is rich text data with a display style, the visual effect of the data input into the input box can be highlighted, which is convenient for the user to search and identify, and thus the user's interaction experience is improved. Third, this embodiment supports calling out the prompt boxes corresponding to multiple target mention characters at the same time. In this way, when multiple mention characters that need to call out the prompt box are input into the input box, the prompt boxes corresponding to each mention character can be called out at the same time, so that the user can select the corresponding rich text data from the prompt boxes corresponding to each mention character one by one, thereby improving the data processing efficiency.
[0053] Based on the above findings, this embodiment provides a technical solution for data processing, specifically: if at least one target mentioned character is input in any target input box of the front-end interface, at least one hint box is used to prompt at least part of the rich text data corresponding to the target mentioned character, and the rich text data is data applicable to the services supported by the front-end interface and allowed to be input into the target input box; if there is selected target rich text data in the prompted rich text data, the target display style data applicable to the target rich text data is obtained, and the display style indicated by the target display style data is used to reflect the data type of the target rich text data; based on the target display style data, the corresponding target mentioned character in the target input box is replaced with the target rich text data with the corresponding display style.
[0054] The technical solution for data processing provided in this embodiment can be applied to the front-end interface of any browser or any application program, so as to input data with prominent visual effects into the input box of the front-end interface efficiently through this technical solution. This embodiment does not limit the types of browsers and application programs, and can be flexibly selected based on business needs.
[0055] Based on the above technical solution for data processing, this embodiment specifically provides a data processing method and device. The following specifically describes the data processing method and device provided in this embodiment.
[0056] This application embodiment provides a data processing method, as Figure 1 shown, the data processing method provided in this embodiment can at least include the following steps 101 to 103:
[0057] 101. If at least one target mentioned character is input in any target input box of the front-end interface, at least one hint box is used to prompt the rich text data corresponding to at least part of the target mentioned character, and the rich text data is data applicable to the services supported by the front-end interface and allowed to be input into the target input box.
[0058] The target input box in the front-end interface is an input box that needs to input rich text data based on the mentioned character, and the target input box has the ability to display rich text data. There are many input boxes in the front-end interface. In practical applications, all or part of the input boxes in the front-end interface can be set as target input boxes with the ability to display rich text data based on specific business requirements. This embodiment does not make any limitations in this regard.
[0059] After selecting the target input box in the front-end interface, it is necessary to monitor whether each target input box inputs the target mentioned character, so as to timely discover the target input box where the target mentioned character is input. The methods for monitoring whether each target input box inputs the target mentioned character can at least include the following Method 1 and Method 2.
[0060] Method 1: For each target input box included in the front-end interface, perform the following steps 101A to 101B respectively:
[0061] 101A. If an input event related to the input in the input box is monitored for the front-end interface, search for a preset mention character in the data input in the current target input box.
[0062] When an input event related to the input in the input box occurs on the front-end interface, it indicates that there is a possibility of inputting a mention character in the current target input box. Based on this, it is necessary to monitor whether an input event related to the input in the input box occurs on the front-end interface. The input event related to the input in the input box can be selected based on business needs, and this embodiment does not limit it. Exemplarily, the input event related to the input in the input box may include, but is not limited to, at least one of the following: element content change event (i.e., input event), key press event (i.e., keydown), key release event (i.e., keyup event), focus event (i.e., focus event), blur event (i.e., blur event), composition start event (i.e., compositionstart event), composition end event (i.e., compositionend event), paste event (i.e., paste event), etc.
[0063] If an input event related to the input in the input box is monitored, it indicates that there is a possibility of inputting a mention character in the current target input box. Therefore, the step of searching for a preset mention character in the data input in the target input box is executed. It should be noted that there are two types of data input in the target input box: One is that considering that users are likely to call up the prompt box through newly input mention characters to quickly input data into the input box. Based on this, the data input in the target input box is the newly input data in the target input box. The newly input data may be input by the user character by character into the target input box by manually pressing the keyboard, or may be input into the target input box in batches with multiple characters by paste operation or batch import operation. It should be noted that the line breaks in the considered newly input data need to be converted into preset tags to ensure the correct format of the data pasted into the target input box. The preset tags here are determined based on business requirements. Exemplarily, the preset tags may include, but are not limited to, Another is that the target input box may include mention characters that have existed in the target input box for a duration longer than the target duration, and the user has not selected corresponding rich text data for this part of the mention characters. Considering that the user may have a need to recall the prompt box again to select corresponding rich text data for this part of the mention characters, based on this, the data input in the target input box is all the data existing in the target input. Based on the above two situations, this embodiment adopts the method of searching for preset mention characters in the data input in the current target input box. In this way, as long as the preset mention characters exist in the data input in the target input box, whether the preset mention characters are at the end of the data or among other characters in the data, the preset mention characters input in the target input box can be confirmed through the search result. Exemplarily, by means of a paste operation, the data "Zhang San @ Delivery address: Area A" is input into the target input box. By searching for the preset mention characters in the input data, the preset mention character "@" located among other characters can be accurately found.
[0064] The preset mention characters in this embodiment are characters that can evoke a prompt box to prompt rich text data, and the number and form of the mention characters can be flexibly set based on business needs. The mention characters can include but are not limited to: symbols, characters, combinations of symbols and characters. Exemplarily, the preset mention characters include: @, #, / , A, B%.
[0065] 101B. If a preset mention character is found, it is monitored that the target mention character is input in the current target input box, and the target mention character is the preset mention character in the input data;
[0066] If searching for preset mention characters in the input data indicates that data needs to be input into the target input box based on the found mention characters, the target input box is monitored for input of the target prompt character. Specifically, if only one preset mention character is found in the input data, the found preset mention character is determined as the target mention character input in the current target input box. If two or more preset mention characters are found in the input data, any one of the following methods can be selected to determine the target mention character:
[0067] One method is to determine the last preset mention character in the input data as the target mention character to be input in the current target input box based on the word order of the input data. In this way, after inputting the corresponding rich text data into the current target input box based on the target mention character, the rich text data will not affect the semantic expression of the data before the target mention character. In practical applications, the situation where two or more preset mention characters are found in the input data is probably caused by the following reasons: First, the input data is data including multiple characters copied from other locations. Second, the input data includes mention characters that have existed in the target input box for a duration longer than the target duration, and the user has not selected the corresponding rich text data for this part of the mention characters before.
[0068] Another method is to locate the cursor in the current target input box and determine the preset mention character before the cursor as the target mention character to be input in the current target input box. The cursor is used to indicate the position where the user expects to input data. Based on this, the preset mention character following which the cursor is located is determined as the target mention character.
[0069] Another method is to issue a target mention character selection prompt, which is used to prompt the user to select the target mention character from the preset mention characters in the newly input data. If the selected preset mention character is monitored, the selected preset mention character is determined as the target mention character to be input in the current target input box.
[0070] There is also a method of determining all the preset mention characters in the input data as the target mention characters to be input in the current target input box. In this way, it is possible to quickly input rich text data into the target input box based on multiple target mention characters simultaneously.
[0071] Method 2: For each target input box included in the front-end interface, perform the following steps 101C to 101D respectively:
[0072] 101C. If an input event related to the input in the input box is monitored for the front-end interface and new input data is detected in the current target input box, determine whether the new input data is a preset mention character.
[0073] Data is usually input into the input box sequentially. Based on this, in order to promptly detect the preset mention character input into the target input box, when an input event related to the input in the input box is monitored and new input data is detected in the current target input box, directly determine whether the new input data is a preset mention character.
[0074] 101D. If it is determined that the new input data is a preset mention character, it is detected that the target mention character is input in the current target input box, and the target mention character is the new input data.
[0075] For the above two methods of monitoring whether each target input box inputs the target mentioned character, at least one of them can be randomly selected for use based on the service, and this embodiment does not make any limitations in this regard. It should be noted that when the two methods are used in combination, for each target input box included in the front-end interface, the following operations are respectively performed: when an input event related to the input in the input box is monitored for the front-end interface, it is necessary to first determine whether the input event is a target input event for batch input of multiple characters into the input box, and the target input event may include, but is not limited to, a paste event, a batch import event, etc. If it is determined to be a target input event, then steps 101A to 101B in Method 1 above are executed. If it is determined not to be a target input event, then steps 101C to 101D in Method 2 above are executed.
[0076] In some embodiments, after the above step of monitoring whether each target input box inputs the target mentioned character, if at least one target mentioned character is input in any target input box of the front-end interface, at least part of the rich text data corresponding to the target mentioned character is prompted through at least one prompt box, so that the user can determine the rich text data to be input into the target input box through a selection operation.
[0077] The method of prompting at least part of the rich text data corresponding to at least some target mentioned characters through at least one prompt box may at least include the following Method A to Method C:
[0078] Method A, the implementation steps of prompting at least part of the rich text data corresponding to at least some target mentioned characters through at least one prompt box may include: for each target mentioned character, the following operations are respectively performed: a corresponding prompt box is called for the target mentioned character, and the rich text data corresponding to the target mentioned character is prompted through the called prompt box. In this way, each target mentioned character has its own corresponding prompt box, and the user can select the target rich text data corresponding to each target mentioned character one by one from the prompt boxes corresponding to each target mentioned character, so as to batch replace each target mentioned character with its corresponding target rich text data with corresponding display, thereby improving the efficiency of inputting data into the target input box.
[0079] Exemplarily, target mentioned characters @ and # are input in the target input box, and both the target mentioned characters @ and # are determined to be target mentioned characters for which a prompt box needs to be called. As Figure 2 shown, a corresponding prompt box 1 is called for the target mentioned character @. A corresponding prompt box 2 is called for the target mentioned character #. The user selects the target rich text data AA City A Community and clothing from prompt box 1 and prompt box 2 respectively. After performing step 103 to replace the corresponding target mentioned character in the target input box with the target rich text data with the corresponding display style based on the target display style data, as Figure 3As shown, the data entered in the target input box becomes like Figure 3 shown, the address is "Clothing in Community A, City AA". The address "Clothing in Community A, City AA" indicates that the order address is Community A, City AA, and the type of goods involved in the order is clothing. It should be noted that in order to clarify the correspondence between the target mentioned characters and the prompt box, the corresponding target mentioned characters are marked in the prompt box.
[0080] Method B. The implementation steps of prompting rich text data corresponding to at least some of the target mentioned characters through at least one prompt box may include: If there is at least one first mentioned character in the target input box for which the prompt box has not been called out, when the cursor is again located after any of the first mentioned characters, call out the prompt box corresponding to any of the first mentioned characters, and prompt the rich text data corresponding to any of the first mentioned characters through the called out prompt box.
[0081] The reasons for the existence of the first mentioned character in the target input box for which the prompt box has not been called out may include the following two: First, when a first mentioned character is entered in the target input box and its corresponding prompt box has not been called out yet, the user jumps to operate other input boxes; Second, after a first mentioned character is entered in the target input box, the corresponding prompt box is called out for it, but the user does not perform a rich text data selection operation in the prompt box within the preset time. It should be understood that there may be other situations that result in the existence of the first mentioned character in the target input box for which the prompt box has not been called out. This is not restricted here, and this solution can solve the problems arising from this situation.
[0082] In some embodiments, one of the activation conditions for activating the prompt box corresponding to the mentioned character is: the cursor position is at the activation position of the prompt box corresponding to the mentioned character. In one example, the activation position of the prompt box corresponding to the mentioned character is after the mentioned character. Optionally, it is the next character position after the mentioned character (which can also be called the next character position of the mentioned character).
[0083] When the cursor is again located after any of the first mentioned characters, it means that the user needs to call out the prompt box corresponding to the first mentioned character again to prompt the rich text data corresponding to the first mentioned character for the selection of rich text data. Therefore, the prompt box corresponding to the first mentioned character is called out, and the rich text data corresponding to the first mentioned character is prompted through the called out prompt box.
[0084] Exemplarily, as Figure 4 shown, when the mentioned character "@" is entered in input box 1 and its corresponding prompt box has not been called out yet, the user jumps to operate input box 2. At this time, there is no cursor in input box 1, and the cursor is located in input box 2. When the user returns to operate input box 1 again and needs to call out the prompt box for the mentioned character "@", as Figure 5As shown, the user moves the cursor into input box 1 and positions the cursor after the mentioned character @. Based on this, the corresponding tooltip 1 for the mentioned character @ is called up, and the rich text data corresponding to the mentioned character @ is prompted through the called-up tooltip. In another example, when there are multiple mentioned characters in an input box (as shown in Figure 2 , there are two mentioned characters, @ and #), if the tooltip corresponding to one of the mentioned characters (assumed to be @) is not called up, or the tooltip disappears after being called up, then when the cursor is again positioned after that mentioned character, the corresponding tooltip for that mentioned character will be called up again. In this example, the situation where the tooltip corresponding to the mentioned character disappears after being called up can be any one or combination of the following situations ①-④.
[0085] Situation ①, the tooltip corresponding to the mentioned character is called up, and the user does not operate on the tooltip for a long time, resulting in the disappearance of the tooltip. For example, Figure 2 , after @ is input, the corresponding tooltip for @ is called up, and the user does not operate on the tooltip for a long time (more than the predetermined time of 2 minutes, 3 minutes, or other set time), resulting in the disappearance of the corresponding tooltip for @.
[0086] Situation ②, the tooltip corresponding to the mentioned character is called up, and the user does not operate on the tooltip, but adjusts the cursor position so that the cursor position is not at the position where the tooltip for the mentioned character is called up, resulting in the disappearance of the tooltip. For example, Figure 2 , after @ is input, the cursor is at the next character position after the @ character (the position where the tooltip is called up), the corresponding tooltip for @ is called up, but the user does not operate on the tooltip, but moves the cursor to the next character position after the mentioned character # (the position where the tooltip is called up), resulting in the disappearance of the corresponding tooltip for @ and the calling up of the corresponding tooltip for #. Another example is Figure 2 , after @ is input, the cursor is at the next character position after the @ character (the position where the tooltip is called up), the corresponding tooltip for @ is called up, but the user does not operate on the tooltip, but moves the cursor to the next character position or other position after the position where the tooltip is called up, resulting in the disappearance of the corresponding tooltip for @.
[0087] Situation ③, the tooltip corresponding to the mentioned character is called up, and the user operates on the tooltip, resulting in the disappearance of the tooltip. But if the user needs to operate on the tooltip again later, they can adjust the cursor position so that the cursor position is at the position where the tooltip for the mentioned character is called up to re-call up the tooltip. For example, Figure 2In the example, after @ is input, the cursor is located at the next character position of the @ character (the position where the prompt box is called up), and the prompt box corresponding to @ is called up. The user operates the prompt box and moves the cursor to the next character position after the mentioned character # (the position where the prompt box is called up), causing the prompt box corresponding to @ to disappear and the prompt box corresponding to # to be called up.
[0088] Case ④, due to a malfunction (process abnormality), when the cursor is located at the invocation position of the prompt box of the mentioned character, the corresponding prompt box of the mentioned character is not invoked.
[0089] Method C, the implementation steps of prompting rich text data corresponding to at least part of the target mentioned characters through at least one prompt box may include: calling out a corresponding prompt box for a second mentioned character among the at least one target mentioned character that is input into the target prompt box using a target input event, and prompting the rich text data corresponding to the second mentioned character through the called out prompt box.
[0090] Normally, in the prior art, the data input into the input box through input events such as paste events can only determine the last target mentioned character in the input data as the target mentioned character that needs to call out the prompt box, which limits the business flexibility of inputting data into the input box based on the mentioned characters. Based on this, the target input event can be set in advance based on business needs, and the target mentioned characters input into the target prompt box by the target input event are all mentioned characters that need to call out the corresponding prompt box. Exemplarily, the target input event can include but is not limited to paste events, batch import events, etc.
[0091] For example, Figure 6 The data entered in the input box is "address@#", and the data is pasted into the input box through the paste input event. In the prior art, it is usually like Figure 6 Only the prompt box 2 corresponding to the mentioned character # is called out. However, using the solution provided in this embodiment, the paste event is selected as the target input event, as shown in Figure 7 As shown, prompt box 1 and prompt box 2 are called out for the mentioned character @ and the mentioned character # respectively. In this way, each mentioned character has its own corresponding prompt box, and the user can select the corresponding target rich text data of each mentioned character from the corresponding prompt box of each mentioned character one by one, so as to replace each mentioned character in batches with its corresponding target rich text data with corresponding display, thereby improving the efficiency of inputting data into the target input box.
[0092] In other embodiments, method C may be implemented in combination with the aforementioned method B. If one or more prompt boxes in the prompt boxes invoked by method C are not invoked or need to be invoked again after disappearing, the aforementioned method B may be used for implementation.
[0093] The tooltip prompts the rich text data corresponding to the target mention character. Based on this, to meet the user's data input requirements, at least one mention character and the corresponding rich text data for each mention character are preset in advance. Each rich text data has an applicable input box and is applicable to the services supported by the front-end interface. The front-end interface is used to collect data through the input box and submit the collected data to the back-end so that the back-end can perform corresponding business processing based on the data. Based on this, the front-end interface has supported services, and collects data applicable to this service through the input box for the back-end to use. Exemplarily, if the front-end interface is used to collect order data through the input box, the service supported by the front-end is the order generation service, and the rich text data is the data applicable to the order generation service. For example, the rich text data is the data used to indicate the delivery address. Exemplarily, if the front-end interface is used to collect the response data in the question-and-answer pairs for training the question-and-answer robot model through the input box, the service supported by the front-end is the question-and-answer training service, and the rich text data is the response data applicable to the question-and-answer training service.
[0094] Based on extracting the corresponding relationship between the preset mention characters and the rich text data, when it is necessary to prompt the rich text data corresponding to any target mention character through the tooltip, determine the rich text data corresponding to the target mention character. The determined rich text data is the rich text data applicable to the target input box.
[0095] After determining the rich text data corresponding to the target mention character, prompt the rich text data corresponding to the target mention character through the tooltip for the user to select. The methods for the tooltip to prompt the rich text data corresponding to the target mention character can at least include the following two:
[0096] One is to display each rich text data corresponding to the target mention character through the tooltip. In this way, the user can directly view the complete rich text data through the tooltip, so that the user can accurately select the rich text data that meets their own input requirements based on the complete rich text data. Exemplarily, when the target mention character @ is entered in the input box, the rich text data corresponding to the target mention character @ includes AA City, Area A, Street A, Community A, and BB City, Area B, Street B, Community B. As Figure 8 shown, each rich text data corresponding to the target mention character @ is completely displayed through the tooltip.
[0097] Another way is to determine the hint data for each rich text data corresponding to at least part of the target mentioned characters before hinting the rich text data corresponding to at least part of the target mentioned characters through at least one hint box, so as to hint the rich text data corresponding to at least part of the target mentioned characters through the at least one hint box based on the hint data, and the hint data is obtained by abstracting the rich text data. Based on this, the hint data of each rich text data is displayed through the hint box. The display window size of the hint box is limited. If there are a large number of rich text data, or the length of the rich text data is long or complex, it will be difficult to clearly display each rich text data through the hint box. Based on this, the hint data of each rich text data is displayed through the hint box. The hint data is obtained by abstracting the corresponding rich text data, and it is used to reflect the key information in the corresponding rich text data. In this way, the user can know the data situation of the corresponding rich text data through the hint data, and the user can still accurately select the rich text data that meets his own input needs through the hint data. Exemplarily, when the target mentioned character @ is input in the input box, the rich text data corresponding to the target mentioned character @ includes Community A, Street A, District A, City AA and Community B, Street B, District B, City BB. The hint data corresponding to Community A, Street A, District A, City AA is Community A, City AA, and the hint data corresponding to Community B, Street B, District B, City BB is Community B, City BB. As Figure 9 shown, the hint data of each rich text data corresponding to the target mentioned character @ is completely displayed through the hint box.
[0098] For the above two methods of hinting the rich text data corresponding to the target mentioned characters by the hint box, at least one can be flexibly selected for use based on business needs, and this embodiment does not make any limitations in this regard. Exemplarily, when two methods are selected for combined use, first judge whether the total data volume of the rich text data corresponding to the target mentioned characters exceeds the threshold value that the hint box can clearly display the rich text data. If it does not exceed, the first method described above is adopted; if it exceeds, the second method described above is adopted.
[0099] In some embodiments, when there is a relatively large amount of rich text data corresponding to the target mentioned characters prompted by the prompt box, it is difficult for the user to quickly select the rich text data that meets their own needs. Based on this, the prompt box includes a filtering box, which is used to input characters for filtering rich text data, so as to filter out rich text data through the input characters for the user to select targeted. In this way, the data processing method provided in this embodiment may further include the following steps: If it is detected that characters are input in the filtering box, then filter out the candidate rich text data containing the input characters from the rich text data corresponding to the target mentioned characters, and retain the prompt of the candidate rich text data by the prompt box. In this way, only the prompt of the candidate rich text data by the prompt box is retained, narrowing the range of rich text data that the user can select, so that the user can quickly visually locate the rich text data they need, thereby improving the selection efficiency of the rich text data. Exemplarily, Figure 8 Neutralization Figure 9 Both include a filtering box. Below, Figure 9 is taken as an example to illustrate the application method of the filtering box. Figure 9 Input "A area" in the filtering box of, then filter out the candidate rich text data "AA City A Area" containing the input characters "A area" from the rich text data corresponding to the target mentioned characters, and then as Figure 10 shown, only retain the prompt of the candidate rich text data "AA City A Area" by the prompt box.
[0100] In some embodiments, the style of the prompt box affects the user's visual viewing experience. Based on this, before the rich text data corresponding to the target mentioned characters is prompted by the prompt box, the data processing method provided in this embodiment may further include a prompt box construction step, and the implementation method of this prompt box construction step may at least include the following method D and method E:
[0101] Method D: Obtain the target prompt box style data corresponding to the user information of the user currently using the front-end interface. Each user information has corresponding prompt box style data; construct a prompt box with the appearance style indicated by the target prompt box style data. In this way, the constructed prompt box is suitable for the user indicated by the corresponding user information, so as to improve the viewing experience of the corresponding user. The user information can be expressed by at least one of the following information: user ID, user role, etc.
[0102] Method E: If it is detected that the user currently using the front-end interface has customized personalized prompt box style data, then construct a prompt box with the appearance style indicated by the personalized prompt box style data; if it is detected that the user currently using the front-end interface has not customized personalized prompt box style data, then obtain the preset default prompt box style data, and construct a prompt box with the appearance style indicated by the default prompt box style data.
[0103] If it is detected that the user currently using the front-end interface has customized personalized prompt box style data, it indicates that the user has a need for personalized appearance style display of the prompt box. Based on this, obtain the personalized prompt box style data customized by the user, and construct a prompt box with an appearance style indicated by the personalized prompt box style data, so as to prompt the rich text data corresponding to the target mentioned character through the appearance style that meets the user's viewing needs, so as to improve the user's viewing experience.
[0104] If it is detected that the user currently using the front-end interface has not customized personalized prompt box style data, then obtain the preset default prompt box style data, indicating that the user has no special requirements for the appearance style of the prompt box. Based on this, obtain the preset default prompt box style data and construct a prompt box with an appearance style indicated by the default prompt box style data.
[0105] The implementation methods of the above two prompt box construction steps can be flexibly selected and used arbitrarily based on business needs, and this embodiment does not make any limitations in this regard. The prompt box style data in the above two methods is the data used to construct the appearance style of the prompt box, which can include but is not limited to at least one of the following contents: the background color of the prompt box, the border color, the border size, the border style (such as solid line, dashed line), the text style (such as font, size, color, thickness, alignment method, etc.), the inner margin (the distance between the content and the border), the transparency of the prompt box, the animation effect of the prompt box (such as fade-in and fade-out, sliding, etc.).
[0106] In some embodiments, the display position of the prompt box affects the user's viewing effect. Based on this, before prompting the rich text data corresponding to the target mentioned character through the prompt box, the data processing method provided in this embodiment may further include the step of determining the display area of the prompt box. The implementation method of this step may at least include the following step methods F and method G:
[0107] Method F: For each target mentioned character in at least part of the target mentioned characters, respectively execute: determine the positioning reference coordinates for displaying the prompt box, where the positioning reference coordinates are the coordinates corresponding to the cursor of the target mentioned character in the target coordinate system, or the positioning reference coordinates are the coordinates corresponding to the target vertex of the target input box in the target coordinate system, and the target coordinate system is the screen coordinate system of the screen displaying the front-end interface; based on the positioning reference coordinates and the size data of the prompt box, determine the vertex coordinates corresponding to the specified vertex in the prompt box in the target coordinate system, and the vertex coordinates satisfy that the prompt box does not block the target input box after being displayed; set and determine the display area of the prompt box based on the vertex coordinates and the size data.
[0108] The front - end interface is displayed on the screen of an electronic device. Therefore, it is necessary to determine the display area of the prompt box in the screen coordinate system of the screen, so as to enable the prompt box to be clearly displayed on the screen for the user to view. Based on this, first, the screen coordinate system of the screen displaying the front - end interface is determined as the target coordinate system, and the coordinate corresponding to the cursor of the target mentioned character in the target coordinate system, or the positioning reference coordinate, which is the coordinate corresponding to the target vertex (such as the left vertex) of the target input box in the target coordinate system, is determined as the positioning reference coordinate. Then, based on the size data of the prompt box (including the height and length of the prompt box) and the positioning reference coordinate, the vertex coordinate corresponding to the specified vertex (such as the left vertex) in the prompt box in the target coordinate system is determined. Finally, the display area of the prompt box is set based on the vertex coordinate and the size data. The size of the set display area is the same as that of the prompt box and does not block the target input box, so that after the prompt box is displayed in the display area, the content entered in the target input box is not blocked by the prompt box.
[0109] Method G: For each target mentioned character in at least part of the target mentioned characters, perform the following respectively: Determine the positioning reference coordinate for displaying the prompt box. The positioning reference coordinate is the coordinate corresponding to the cursor of the target mentioned character in the target coordinate system, or the positioning reference coordinate is the coordinate corresponding to the target vertex of the target input box in the target coordinate system. The target coordinate system is the screen coordinate system of the screen displaying the front - end interface; if the positioning reference coordinate is not within the main display area for displaying the prompt box in the screen coordinate system, then the main display area is determined as the display area of the prompt box; if the positioning reference coordinate is within the main display area, then the alternate display area in the screen coordinate system for displaying the prompt box is determined as the display area of the prompt box.
[0110] In order to achieve the standardization of the prompt box display, the main display area and the alternate display area can be preset in the screen coordinate system. The alternate display area does not overlap with the main display area, and both the alternate display area and the main display area can completely display the prompt box.
[0111] If the positioning reference coordinate is not within the main display area for displaying the prompt box, it means that after the prompt box is displayed in the main display area, it will not block the content in the target input box. Therefore, the main display area is determined as the display area of the prompt box. If the positioning reference coordinate is within the main display area, it means that after the prompt box is displayed in the main display area, it will block the content in the target input box. Therefore, in order to avoid the blocking situation, the alternate display area is determined as the display area of the prompt box.
[0112] Any of the above two implementation methods for determining the display area of the prompt box can be flexibly selected based on business needs, and this embodiment does not make any limitations in this regard. After determining the display area of the prompt box, the prompt box can be displayed in the display area. Since the display area is the area pre-planned for the prompt box, the prompt box will not block the content in the target input box. It should be noted that when it is necessary to call out the prompt boxes of multiple target mentioned characters, any of the following methods is used for display processing: First, according to the order of appearance of these target mentioned characters from front to back in the target input box, the prompt boxes corresponding to each target mentioned character are stacked and displayed from top to bottom. Second, the prompt boxes corresponding to these target mentioned characters are tiled and displayed, which is convenient for the user to flexibly and intuitively select the corresponding target non-standard data for any target mentioned character.
[0113] 102. If there is selected target rich text data in the prompted rich text data, obtain the target display style data applicable to the target rich text data, and the display style indicated by the target display style data is used to reflect the data type of the target rich text data.
[0114] After the rich text data corresponding to the target mentioned characters is prompted by the prompt box, the user can determine which rich text data needs to be input into the target input box through a selection operation. The selection operation can at least include the following two types: One is that the user selects the rich text data that needs to be input into the target input box by clicking in the prompt box. The other is that the user selects the rich text data that needs to be input into the target input box by voice input. Any of the above two selection operations can be flexibly selected based on business needs, and this embodiment does not make any limitations in this regard.
[0115] If there is selected target rich text data in the prompted rich text data, it means that the target rich text data needs to be input into the target input box. At this time, it is necessary to obtain the target display style data applicable to the target rich text data to highlight the visual effect of the target rich text data in the target input box based on the display style indicated by the target display style data. It should be noted that the display style indicated by the target display style data is used to reflect the data type of the target rich text data, so that through the display style, the user can easily know the data type of the input rich text data and improve the user experience.
[0116] The methods for obtaining the target display style data applicable to the target rich text data can at least include the following two types:
[0117] First, the specific process of obtaining the target display style data applicable to the target rich text data may include the following steps: If it is determined that the user currently using the front-end interface used the display style data customized by the user itself for the target rich text data the last time the front-end interface was used, obtain the display style data customized by the user as the target display style data applicable to the target rich text data.
[0118] If it is determined that the user currently using the front-end interface used the display style data customized by the user for the target rich text data the last time the front-end interface was used, it indicates that the user has personalized display style requirements for the target rich text data. Therefore, in order to meet the personalized needs of the user, obtain the display style data customized by the user as the target display style data applicable to the target rich text data.
[0119] Second, the specific process of obtaining the target display style data applicable to the target rich text data may include the following steps: Obtain the default display style data corresponding to the target rich text data as the target display style data applicable to the target rich text data.
[0120] Each rich text data has corresponding default display style data. Based on this, in order to facilitate quickly obtaining the display style data to display the target rich text data, obtain the default display style data corresponding to the target rich text data as the target display style data applicable to the target rich text data.
[0121] The above two methods of obtaining the target display style data applicable to the target rich text data can be flexibly selected based on business needs, and this embodiment does not make any limitations in this regard. Exemplarily, when the two methods are combined and used, the first method is adopted first. When the first method determines that the user currently using the front-end interface did not use the display style data customized by the user for the target rich text data the last time the front-end interface was used, then continue to adopt the second method. The display style data involved in the above methods may include but are not limited to at least one of the following contents: font type, font size, font color, font weight, font style (such as italic, underline, etc.), background color, transparency, shadow, etc.
[0122] 103. Based on the target display style data, replace the target mentioned character in the target input box with the target rich text data with the corresponding display style.
[0123] The specific process of replacing the target mentioned character in the target input box with the target rich text data with the corresponding display style based on the target display style data may be: Delete the target mentioned character; Determine the cursor position after deleting the target mentioned character as the starting position for inputting the target rich text data, and input the target rich text data with the corresponding display style at the starting position.
[0124] It should be noted that when there is one target rich text data, the target mention characters in the target input box are replaced with the target rich text data with corresponding display styles. When there are two or more target rich text data, based on the semantic relationship or business logic relationship between the target rich text data, determine the input order of each target rich text data, and replace the target mention characters in the target input box with each target rich text data with corresponding display styles arranged in the input order. Exemplarily, two target rich text data are selected, and both of these two target rich text data are response data for the same question. In this case, it is necessary to first determine the business logic relationship between the target rich text data to determine the input order of each target rich text data based on the business logic relationship. The method for determining the business logic relationship may include the following steps: determine the degree of adaptation of these two target rich text data to the question. The degree of adaptation is used to indicate the business logic relationship between these two target rich text data. The target rich text data with a high degree of adaptation is the best response, and the target rich text data with a low degree of adaptation is the alternative response when the best response does not meet the user's requirements. Based on this, determine the input order as the target rich text data with a high degree of adaptation is before the target rich text data with a low degree of adaptation. Then, input each target rich text data with corresponding display styles into the input box based on the input order. Among them, the corresponding display styles of these two target rich text data are different colors.
[0125] After replacing the target mention characters in the target input box with the target rich text data with corresponding display styles, the input of data with a prominent visual effect into the target input box is completed. Through the display style, the user can clearly understand the data type of the data input into the target input box, which provides convenience for the user to perform business processing.
[0126] The data processing method provided by the embodiments of the present application, when a target mention character is input in any target input box on the front-end interface, prompts rich text data corresponding to the target mention character through a prompt box for the user to select. For the selected target rich text data, obtain the target display style data applicable to the target rich text data, and the display style indicated by the target display style data is used to reflect the data type of the target rich text data. Then, based on the target display style data, replace the target mention character in the target input box with the target rich text data with the corresponding display style. It can be seen that the solution provided by the embodiments of the present application can at least achieve the following two effects: First, since there is no need for the user to manually input data into the input box, the user can input the data that meets the user's needs into the input box through a selection operation, so the efficiency of inputting data into the input box can be improved. Second, since the data finally input into the input box is rich text data with a display style, the visual effect of the data input into the input box can be highlighted, which is convenient for the user to search and identify, and thus the user's interaction experience is improved. Third, this embodiment supports simultaneously calling out prompt boxes corresponding to multiple target mention characters. In this way, when multiple mention characters that need to call out prompt boxes are input in the input box, the prompt boxes corresponding to each mention character can be called out simultaneously, so that the user can select the corresponding rich text data one by one from the prompt boxes corresponding to each mention character, thereby improving the data processing efficiency.
[0127] In some embodiments of the present application, the front-end interface usually includes a large number of input boxes. Considering that not all input boxes may need to input rich text data based on mention characters. Based on this, the data processing method provided in this embodiment may further include the following steps 104 to 105.
[0128] 104. Select a target input box from the input boxes included in the front-end interface. The target input box is an input box that needs to input rich text data based on a mention character and is set as a block-level element with an editable content attribute.
[0129] Select a target input box from the input boxes included in the front-end interface that needs to input rich text data based on a mention character to efficiently input data with a prominent visual effect into the target input box. The method for selecting a target input box from the input boxes included in the front-end interface that needs to input rich text data based on a mention character may at least include the following four types:
[0130] First, the front-end interface includes input boxes for collecting and submitting sensitive data. If data is entered into these input boxes based on the mentioned characters, after entering the mentioned characters in these input boxes, it is inevitable that rich text data corresponding to the mentioned characters will be prompted through the prompt box, and this rich text data is the sensitive data that these input boxes need to collect and submit. In this way, the risk of sensitive data leakage will be increased. Based on this, in order to reduce the risk of sensitive data leakage, the target input boxes in the front-end interface are at least used to submit and / or collect non-sensitive data, that is, the input boxes in the front-end interface where the data collected and submitted is not sensitive data are selected as the target input boxes. Exemplarily, the front-end interface includes an input box for collecting the user's login password. If after entering the mentioned characters in this input box, the rich text data corresponding to the mentioned characters, that is, the user's login password, is prompted through the prompt box, then the user's login password will be leaked. Therefore, this input box cannot be selected as the target input box.
[0131] Second, the longer the data length, the longer the time-consuming for manual input. Based on this situation, in order to improve the input efficiency, the input boxes in the front-end interface where the length of the data collected and submitted is greater than the length threshold are selected as the target input boxes. In this way, there is no need for the user to manually enter this data into the target input box. The user only needs to enter the mentioned characters into the target input box, and then the prompt box can be triggered to prompt the rich text data corresponding to the mentioned characters. Thus, the user can achieve the input of data that meets the user's needs into the input box through the selection operation. In addition, the method for setting the length threshold may include the following process: determining multiple data lengths; for each data length, the following steps are respectively executed: obtaining multiple target data of the current data length, collecting the time-consuming duration for the user to input each target data, and determining the average value of the time-consuming duration of each target data as the target time-consuming duration of the current data length; determining the data length corresponding to the target time-consuming duration that meets the user's time-consuming requirement as the length threshold. It should be noted that the target time-consuming duration that meets the user's time-consuming requirement is the time-consuming threshold value required by the user, and the time-consuming durations greater than the target time-consuming duration that meets the user's time-consuming requirement are all unacceptable to the user.
[0132] Third, the higher the data complexity, the longer the time-consuming for manual input and the higher the probability of error. Based on this situation, in order to improve the data input efficiency and reduce the probability of error, the input boxes in the front-end interface where the complexity of the data collected and submitted is greater than the complexity threshold are selected as the target input boxes. In this way, there is no need for the user to manually enter this data into the target input box. The user only needs to enter the mentioned characters into the target input box, and then the prompt box can be triggered to prompt the rich text data corresponding to the mentioned characters. Thus, the user can achieve the input of data that meets the user's needs into the input box through the selection operation.
[0133] The complexity of data can be expressed by the number of character types included in the data, and the complexity is positively correlated with the number of character types. When the data includes characters of multiple character types, the input method needs to be frequently changed during data input, which will affect the data input efficiency and the data input error rate. Therefore, the input boxes in the front-end interface whose complexity of the collected and submitted data is greater than the complexity threshold are selected as the target input boxes.
[0134] Fourth, obtain a target input box selection instruction, which is used to indicate the input box for which rich text data needs to be input based on the mentioned characters; select the input box indicated by the target input box selection instruction as the target input box. Exemplarily, there are 5 input boxes in the front-end interface. The user needs to input rich text data based on the mentioned characters in input box 1 and input box 2 among these five input boxes. In this case, the user issues a target input box selection instruction for input box 1 and input box 2, and this target input box selection instruction indicates that input box 1 and input box 2 need to input rich text data based on the mentioned characters. After obtaining this target input box selection instruction, select input box 1 and input box 2 indicated by the target input box selection instruction as the target input boxes. In this way, the selection permission of the target input box is given to the user, which is convenient for the user to flexibly select the target input box according to their own needs.
[0135] For the above four methods of selecting the target input box for which rich text data needs to be input based on the mentioned characters from the input boxes included in the front-end interface, at least one can be flexibly selected according to business needs, and this embodiment does not make any limitations in this regard.
[0136] 105. For each selected target input box, perform the following respectively: Configure at least one preset display style data as the attribute value of the content editable attribute corresponding to the target input box, so that the current target input box set as a block-level element can display the rich text data in the display style indicated by the preset display style data based on the attribute value of the content editable attribute.
[0137] The target input box needs to be an input box that is set as a block-level element with the content editable attribute, so that the rich text data like functions of the target input box can be realized based on the content editable attribute. Based on this, in order to ensure that the target input box can display rich text data, for any selected target input box: first, judge whether the current target input box has the rich text data display function; if not, set the current target input box as a block-level element (i.e., div) with the content editable attribute (i.e., contenteditable attribute), so that the content of the current target input box can be edited. Then, configure at least one preset display style data as the attribute value of the content editable attribute, so that the current input box has the rich text editing function, and the current target input box set as a block-level element can display the rich text data of the display style indicated by the preset display style data based on the attribute value of the content editable attribute. The quantity of the preset display style data here and the display style indicated by each preset display style data can be determined based on business needs, and this embodiment does not limit this. Exemplarily, the preset display style data can indicate the display style through at least one of the following contents: font type, font size, font color, font weight, font style (such as italic, underline, etc.), background color, transparency, shadow, etc.
[0138] After performing the above steps 104 to 105, the target input box in the front-end interface that needs to input rich text data based on the mentioned characters, that is, has the ability to display and edit rich text data, so as to be able to input data with a prominent visual effect into the input box.
[0139] In some embodiments of the present application, after replacing the target mentioned characters in the target input box with the target rich text data with the corresponding display style based on the target display style data in the above step 103, the data processing method provided in this embodiment may further include: if there are abnormal mentioned characters among the at least one target mentioned characters, and the abnormal mentioned characters are the target mentioned characters in the input box that have not been successfully replaced with the target rich text data with the corresponding display style based on the corresponding target display style data, then incrementally add the corresponding target display style data as the attribute value of the content editable attribute of the target input box; after the incremental addition is successful, perform the step of replacing the abnormal mentioned characters in the target input box with the target rich text data with the corresponding display style based on the corresponding target display style data.
[0140] If there is an abnormal mention character among the at least one target mention character, it indicates that the target input box probably does not support displaying the display style indicated by the target display style data corresponding to the abnormal mention character. Therefore, the target display style data corresponding to the abnormal mention character is incrementally added as the attribute value of the content editable attribute corresponding to the target input box, so that the target mention box can obtain the ability to support displaying the display style indicated by the target display style data corresponding to the abnormal mention character based on the attribute value of the content editable attribute.
[0141] Exemplarily, the display style indicated by the target display style data A corresponding to the mention character 1 is "green italic font". However, the attribute value of the corresponding content editable attribute of the target input box 1 only includes "red Song font". Therefore, limited by the attribute value of the corresponding content editable attribute of the target input box 1, the mention character 1 in the target input box 1 is not successfully replaced with the target rich text data with the corresponding display style "green italic font" based on the target display style data A. Based on this situation, the target display style data A is incrementally added as the attribute value of the corresponding content editable attribute of the target input box 1. After the incremental addition is successful, the attribute value of the corresponding content editable attribute of the target input box 1 includes "red Song font" and "green italic font". Then, by re-executing the step of replacing the mention character 1 in the target input box 1 with the target rich text data with the corresponding display style "green italic font" based on the target display style data A, the target rich text data with the display style "green italic font" can be displayed in the target input box 1. Additionally, it should be noted that the determination process of successful incremental addition here can include: after incrementally adding the target display style data A as the attribute value of the corresponding content editable attribute of the target input box 1, obtaining the test rich text data; based on the target display style data A, displaying the test rich text data with the corresponding display style "green italic font" in the target input box 1. If the test rich text data with the display style "green italic font" is successfully displayed, it is determined that the target display style data A is successfully incrementally added as the attribute value of the corresponding content editable attribute of the target input box 1. Additionally, before re-executing the step of replacing the mention character 1 in the target input box 1 with the target rich text data with the corresponding display style based on the target display style data, the test rich text data displayed in the target input box 1 is deleted.
[0142] After successfully incrementally adding the target display style data corresponding to the abnormal mention character as the attribute value of the content editable attribute corresponding to the target input box, it indicates that the target mention box already has the ability to display the display style indicated by the target display style data. Therefore, the step of replacing the abnormal mention character in the target input box with the target rich text data with the corresponding display style based on the corresponding target display style data is executed, so that the target rich text data can be successfully input into the target input box.
[0143] In some embodiments of the present application, after replacing the corresponding target mentioned characters in the target input box with target rich text data having corresponding display styles based on the target display style data in step 103 above, the data processing method provided in this embodiment may further include the following steps: If it is monitored that the target input box does not undergo a blur event, move the cursor in the target input box to after the target rich text data.
[0144] For an input box, there are focus events and blur events. A focus event refers to a user clicking on the input box to accurately input data or moving the focus to the input box through the keyboard (such as the Tab key), indicating that the user is about to input data into the input box. A blur event refers to a user clicking on other areas of the front-end interface, the focus leaving the current input box, or moving the focus out of the input box through the keyboard (such as the Tab key), indicating that the user is no longer inputting data into the input box. Based on this, after step 103 above, if it is monitored that the target input box does not undergo a blur event, it means that the user still needs to continue inputting data into the input box, so move the cursor in the target input box to after the target rich text data to ensure that data can continue to be input into the input box.
[0145] Further, if it is monitored that the target input box undergoes a blur event, it is determined that the data input in the target input box is completed. At this time, there will be no cursor in the target input box, and the cursor has been transferred to other input boxes or other positions in the front-end interface.
[0146] In some embodiments of the present application, to increase business flexibility, after the target rich text data is input into the target input box, the data processing method provided in this embodiment supports the user to perform processing operations such as adding additional data and modifying display styles on the target rich text data that has been input into the target input box to further improve the user experience and functionality. Based on this, after replacing the corresponding target mentioned characters in the target input box with target rich text data having corresponding display styles based on the target display style data in step 103 above, the data processing method provided in this embodiment may further include the following steps: If a style modification instruction for the target rich text data in the target input box is monitored, modify the current display style of the target rich text data in the target input box to the display style indicated by the style modification instruction. If a data addition instruction for the target rich text data in the target input box is received, add the data indicated by the data addition instruction to the target rich text data at the position indicated by the data addition instruction.
[0147] Exemplarily, after replacing the corresponding target mentioned characters in the target input box with target rich text data having corresponding display styles based on the target display style data in step 103 above, the target rich text data in green (the green is the display style) is displayed in the target input box. Then, if the user needs the target rich text data to be displayed in red, the user issues a style modification instruction for the target rich text data in the target input box, and this style modification instruction indicates changing the target rich text data from green to red. In this way, when the style modification instruction is received, the current display style "red" of the target rich text data in the target input box is modified to the display style "green" indicated by the style modification instruction. It should be noted that the style modification instruction is only used to modify the current display style of the target rich text data in the target input box.
[0148] In some embodiments of the present application, after replacing the corresponding target mentioned characters in the target input box with target rich text data having corresponding display styles based on the target display style data in step 103 above, the data processing method provided in this embodiment may further include the following steps: If a send instruction for indicating sending the data in the target input box to the backend corresponding to the front-end interface is received, the data in the target input box is converted into plain text data, and the plain text data and the data type of the data in the target input box are sent to the backend, so that the backend performs corresponding service processing on the plain text data based on the data type.
[0149] The input box is used to collect and submit data. Therefore, when a send instruction for indicating sending the data in the target input box to the backend corresponding to the front-end interface is received, the data in the input box needs to be submitted to the backend for the backend to perform service processing. However, the backend service processing usually relies on plain text data. If rich text data is submitted to the backend, the backend also needs to convert the rich text data into plain text data, which seriously affects the efficiency of the backend service processing. Based on this, in this embodiment, the data in the target input box is converted into plain text data and the plain text data is sent to the backend. In some other embodiments, since for some data, its corresponding data type is different in different scenarios (for example, data 1 has a data type of entity in scenario 1 and a data type of parameter value in scenario 2), based on this, when sending the plain text data to the backend, the data type of the data in the target input box also needs to be sent to the backend, so that the backend performs service processing corresponding to the data type on the plain text data, thereby improving the efficiency and accuracy of the backend service processing.
[0150] The send instruction can be received in the following situations: First, there is a data submission button for the input box set in the front-end interface. When this button is triggered, it is determined that a send instruction is received for instructing to send the data in the target input box to the back-end corresponding to the front-end interface. Second, the voice input by the user is collected. When the semantics of the voice obtained after semantic analysis of the voice is to send the data in the target input box to the back-end corresponding to the front-end interface, it is determined that a send instruction is received for instructing to send the data in the target input box to the back-end corresponding to the front-end interface.
[0151] In some embodiments of the present application, in order to enable the user to customize the data that needs to be quickly input into the input box based on their own needs, the data processing method provided in this embodiment may further include the following steps: If a customization instruction for at least one mentioned character is obtained, then for each mentioned character, respectively execute: Determine the input box applicable to the mentioned character in the front-end interface, collect rich text data applicable to the services supported by the front-end interface and allowed to be input into the determined input box, and establish a correspondence relationship between the mentioned character and the rich text data. In this way, the user can subsequently use these mentioned characters to efficiently input data with a prominent visual effect into the input box.
[0152] Exemplarily, a customization instruction for the mentioned character "@" is obtained, and this customization instruction defines that the mentioned character @ is used to call out rich text data related to the delivery address. There are many input boxes in the front-end interface, and each input box is used to collect and submit corresponding data. Based on this, the input box used to collect and submit data related to the delivery address is selected as the specified input box applicable to the mentioned character @ in the front-end interface. Then, collect the rich text data applicable to the service "order generation service" supported by the front-end interface and input into the specified input box. These rich text data are the rich text data related to the delivery address. Then establish a correspondence relationship between the mentioned character @ and the rich text data. In this way, when the mentioned character @ is input into the specified input box, the rich text data corresponding to the mentioned character @ can be prompted through a prompt box for the user to select.
[0153] The mentioned characters, the corresponding rich text data of the mentioned characters, and the display style data applicable to the rich text data in this embodiment all support custom settings. In this way, as the business scenario changes or the user's needs change, the user can flexibly customize and expand the mentioned characters, the corresponding rich text data of the mentioned characters, and the display style data applicable to the rich text data based on business needs or their own needs, thereby improving the flexibility and scalability.
[0154] This embodiment supports the customization of multiple mention characters. After entering the mention characters in the input box, a prompt box will pop up to prompt the corresponding rich text data for the user to select. For the rich text data selected by the user, the applicable display sample data is adopted, and it is input into the input box in the display style indicated by the display sample data. In this way, based on the data type indicated by the display style, the user can intuitively and clearly identify the type of data input in the input box, improving the user experience.
[0155] In some embodiments of the present application, the data processing method provided in this embodiment can be encapsulated as a front-end component based on the Vue framework. In this way, when any front-end interface needs to efficiently input data with a prominent visual effect into the input box, the front-end component can be introduced into the front-end interface through the storage path of the front-end component. Then, based on the mention characters, the rich text data corresponding to the mention characters, and the display style data applicable to the rich text data required by the user on the front-end interface, and based on the data processing method provided in this embodiment encapsulated by the front-end component, it is possible to efficiently input data with a prominent visual effect into the input box on the front-end interface. It can be seen that the front-end component provided in this embodiment is easy to integrate. After the user only introduces the component and customizes the mention characters, the rich text data corresponding to the mention characters, and the display style data applicable to the rich text data, without a complex configuration and initialization process, it is possible to quickly and efficiently input data with a prominent visual effect into the input box on the front-end interface, simplifying the development process and improving the development efficiency.
[0156] In some embodiments, the data processing method provided in this embodiment can efficiently input data with a prominent visual effect into the input box on the front-end interface. This embodiment adopts a DOM tree structure. Since the DOM tree has at most two layers, in this embodiment, step 103 above has good rendering performance in replacing the corresponding target mention characters in the target input box with the target rich text data with the corresponding display style based on the target display style data, ensuring the fluency and response speed of the front-end interface. In addition, the DOM tree structure enables the front-end component to be small in size, thus greatly reducing resource occupancy and reducing the problem of the front-end interface crashing caused by the display of rich text data on the front-end interface, and is suitable for use on web pages such as browsers. The DOM tree structure in this embodiment includes an outer layer structure and an inner layer structure. Among them, the outer layer structure is responsible for monitoring operations such as the mention characters input by the user and cursor positioning, and the inner layer structure is used to implement replacing the target mention characters in the target input box with the target rich text data with the corresponding display style based on the target display style data.
[0157] In some embodiments of the present application, the following will be combined with Figures 11 to 13 the front-end interface shown to specifically illustrate the data processing method provided in this embodiment, as Figure 14As shown, the data processing method provided in this embodiment may at least include the following steps 201 to 211:
[0158] 201. Select a target input box from the input boxes included in the front-end interface. The target input box is an input box that needs to input rich text data based on the mentioned characters and is set as a block-level element with the content editable attribute.
[0159] Figures 11 to 13 The front-end interface in is a front-end interface that supports the Q&A training service of the Q&A robot. The input box 1 is used to collect the response data in the Q&A pairs for training the Q&A robot model. Based on this, the input box 1 is selected as the target input box.
[0160] 202. For each selected target input box, execute respectively: Configure at least one preset display style data as the attribute value of the corresponding content editable attribute of the target input box, so that the target input box set as a block-level element can display the rich text data in the display style indicated by the preset display style data based on the attribute value of the content editable attribute.
[0161] Obtain the preset display style data 1 (the indicated display style is "green italic font"), and configure the preset display style data 1 as the attribute value of the corresponding content editable attribute of the input box 1, so that the input box 1 set as a block-level element can display the rich text data in the display style "green italic font" indicated by the preset display style data based on the attribute value of the content editable attribute.
[0162] 203. Monitor the input of the target input box in the front-end interface.
[0163] 204. If at least one target mentioned character is input in any target input box of the front-end interface, prompt the rich text data corresponding to at least part of the target mentioned characters through at least one prompt box.
[0164] In this embodiment, the corresponding relationship between the preset mentioned characters and the rich text data is extracted. Based on this, as Figure 10 shown, after monitoring that the target mentioned character "@" is input in the input box 1, based on the preset corresponding relationship between the mentioned characters and the rich text data, the rich text data corresponding to "@": Last_user_reponse, Last_reponse, data is prompted through the prompt box. These rich text data are data applicable to the service supported by the front-end interface and allowed to be input into the current target input box.
[0165] In addition, in order to facilitate quickly selecting the rich text data that meets its own needs, as Figures 11 to 13 shown, a filtering box for inputting characters for filtering rich text data is set in the prompt box. As Figure 12As shown, when the character L is input in the filtering box, candidate rich text data "Last_user_reponse, Last_reponse" that contains the input character L is filtered out from the rich text data corresponding to the mentioned character @, and the prompt of the candidate rich text data in the prompt box is retained.
[0166] 205. If there is selected target rich text data among the prompted rich text data, determine whether the user currently using the front-end interface used user-customized display style data for the target rich text data the last time the front-end interface was used. If so, execute 206; otherwise, execute 207.
[0167] After monitoring, it is confirmed that there is selected target rich text data "Last_user_reponse" among the prompted rich text data. At this time, in order to display the selected target rich text data "Last_user_reponse" in input box 1 in a display style that meets the user's needs, it is necessary to determine whether the user currently using the front-end interface used user-customized display style data for the target rich text data the last time the front-end interface was used.
[0168] 206. Obtain the user-customized display style data as the target display style data applicable to the target rich text data, and execute step 208.
[0169] After judgment, the user currently using the front-end interface has customized personalized prompt box style data, indicating that the user has a need for personalized appearance style display of the prompt box. Based on this, obtain the user-customized display style data as the target display style data applicable to the target rich text data, and construct a prompt box with an appearance style indicating personalized prompt box style data based on the target display style data, so as to prompt the rich text data corresponding to the target mentioned character through the prompt box with an appearance style that meets the user's viewing needs, thereby improving the user's viewing experience.
[0170] 207. Obtain the default display style data corresponding to the target rich text data as the target display style data applicable to the target rich text data, where each rich text data has corresponding default display style data.
[0171] 208. Based on the target display style data, replace the corresponding target mentioned character in the target input box with the target rich text data with the corresponding display style.
[0172] The target display style data indicates that the display style is "green italic font", and the property value of the editable attribute corresponding to the content in input box 1 includes the target display style data. Therefore, as Figure 13As shown, based on the target display style data, the mentioned character @ in input box 1 is replaced with the target rich text data "Last_user_reponse" with the corresponding display style "italic green text" (it should be noted that Figure 13 the Last_user_reponse in input box 1 is italic, and green is not shown in Figure 13 ).
[0173] Furthermore, an embodiment of the present application further provides a data processing device. As Figure 15 shown, the data processing device provided in this embodiment may include:
[0174] A prompt module 31, configured to, if it is monitored that at least one target mentioned character is input in any target input box of the front-end interface, prompt, through at least one prompt box, the rich text data corresponding to at least part of the target mentioned characters, where the rich text data is applicable to the service supported by the front-end interface and is allowed to be input into the target input box;
[0175] An acquisition module 32, configured to, if there is selected target rich text data in the prompted rich text data, acquire the target display style data applicable to the target rich text data, where the display style indicated by the target display style data is used to reflect the data type of the target rich text data;
[0176] A replacement module 33, configured to, based on the target display style data, replace the corresponding target mentioned character in the target input box with the target rich text data with the corresponding display style.
[0177] The data processing device provided by the embodiment of the present application, when it detects that a target mention character is input in any target input box on the front-end interface, prompts rich text data corresponding to the target mention character through a prompt box for the user to select. For the selected target rich text data, target display style data applicable to the target rich text data is obtained, and the display style indicated by the target display style data is used to reflect the data type of the target rich text data. Then, based on the target display style data, the target mention character in the target input box is replaced with the target rich text data with the corresponding display style. It can be seen that the solution provided by the embodiment of the present application can at least achieve the following two effects: First, since there is no need for the user to manually input data into the input box, the user can input the data that meets the user's needs into the input box through a selection operation, so the efficiency of inputting data into the input box can be improved. Second, since the data finally input into the input box is rich text data with a display style, the visual effect of the data input into the input box can be highlighted, which is convenient for the user to search and identify, and thus the user's interaction experience is improved. Third, this embodiment supports simultaneously calling out prompt boxes corresponding to multiple target mention characters. In this way, when multiple mention characters that need to call out prompt boxes are input in the input box, the prompt boxes corresponding to each mention character can be called out simultaneously, so that the user can select the corresponding rich text data one by one from the prompt boxes corresponding to each mention character, thereby improving the data processing efficiency.
[0178] In some embodiments of the present application, as Figure 16 shown, the data processing device provided in this embodiment may further include:
[0179] A setting module 34, configured to select a target input box from the input boxes included in the front-end interface, where the target input box is an input box that needs to input rich text data based on a mention character and is set as a block-level element with a content editable attribute; for each selected target input box, perform the following respectively: configure at least one preset display style data as the attribute value of the content editable attribute corresponding to the target input box, so that the target input box set as a block-level element can display rich text data in the display style indicated by the content editable attribute based on the attribute value.
[0180] In some embodiments of the present application, as Figure 16As shown, the setting module 34 can also be used to incrementally add the corresponding target display style data as the attribute value of the content editable attribute corresponding to the target input box if there are abnormal mention characters in the at least one target mention character, where the abnormal mention character is a target mention character in the input box that has not been successfully replaced with target rich text data with the corresponding display style based on the corresponding target display style data; after the incremental addition is successful, trigger the replacement module 33 to execute the step of replacing the abnormal mention character in the target input box with target rich text data with the corresponding display style based on the corresponding target display style data.
[0181] In some embodiments of the present application, as Figure 16 shown, the acquisition module 32 may include:
[0182] The first acquisition unit 321 is used to acquire the user-customized display style data as the target display style data applicable to the target rich text data if it is determined that the user who currently uses the front-end interface used the user-customized display style data for the target rich text data the last time the front-end interface was used.
[0183] In some embodiments of the present application, as Figure 16 shown, each rich text data has corresponding default display style data, then the acquisition module 32 may include:
[0184] The second acquisition unit 322 is used to acquire the corresponding default display style data of the target rich text data as the target display style data applicable to the target rich text data.
[0185] In some embodiments of the present application, as Figure 16 shown, the data processing device provided in this embodiment may further include:
[0186] The first determination module 35 is used to determine the positioning reference coordinates for displaying the prompt box before the prompt module 31 prompts the rich text data corresponding to the target mention character through the prompt box. The positioning reference coordinates are the coordinates corresponding to the cursor of the target mention character in the target coordinate system, or the positioning reference coordinates are the coordinates corresponding to the target vertex of the target input box in the target coordinate system. The target coordinate system is the screen coordinate system of the screen that displays the front-end interface; based on the positioning reference coordinates and the size data of the prompt box, determine the vertex coordinates corresponding to the specified vertex in the prompt box in the target coordinate system, and the vertex coordinates satisfy that the prompt box does not block the target input box after being displayed; set the display area of the prompt box based on the vertex coordinates and the size data.
[0187] In some embodiments of the present application, as Figure 16As shown, the data processing device provided in this embodiment may further include:
[0188] A second determination module 36, configured to determine a positioning reference coordinate for displaying the prompt box before the prompt module 31 prompts rich text data corresponding to the target mentioned character through the prompt box. The positioning reference coordinate is the coordinate corresponding to the cursor of the target mentioned character in the target coordinate system, or the positioning reference coordinate is the coordinate corresponding to the target vertex of the target input box in the target coordinate system. The target coordinate system is the screen coordinate system of the screen displaying the front-end interface. If the positioning reference coordinate is not within the main display area for displaying the prompt box in the screen coordinate system, the main display area is determined as the display area of the prompt box. If the positioning reference coordinate is within the main display area, the alternative display area for displaying the prompt box in the screen coordinate system is determined as the display area of the prompt box, and the alternative display area does not overlap with the main display area.
[0189] In some embodiments of the present application, as Figure 16 As shown, the data processing device provided in this embodiment may further include:
[0190] A first construction module 37, configured to obtain target prompt box style data corresponding to the user information of the user currently using the front-end interface before the prompt module 31 prompts rich text data corresponding to the target mentioned character through the prompt box. Each user information has corresponding prompt box style data. Construct a prompt box with the appearance style indicated by the target prompt box style data.
[0191] In some embodiments of the present application, as Figure 16 As shown, the data processing device provided in this embodiment may further include:
[0192] A second construction module 38, configured to construct a prompt box with the appearance style indicated by the personalized prompt box style data if it is monitored that the user currently using the front-end interface has customized personalized prompt box style data. If it is monitored that the user currently using the front-end interface has not customized personalized prompt box style data, obtain the preset default prompt box style data and construct a prompt box with the appearance style indicated by the default prompt box style data.
[0193] In some embodiments of the present application, as Figure 16 As shown, the prompt module 31 may include:
[0194] A first prompt unit 311, configured to perform the following operations for each of the target mentioned characters: Call out a corresponding prompt box for the target mentioned character, and prompt the rich text data corresponding to the target mentioned character through the called out prompt box.
[0195] In some embodiments of the present application, as Figure 16 shown, the prompt module 31 may include:
[0196] A second prompt unit 312, configured to, if there is at least one first mentioned character in the target input box for which a prompt box has not been called out, when the cursor is again located after any one of the first mentioned characters, call out the corresponding prompt box for any one of the first mentioned characters, and prompt the rich text data corresponding to any one of the first mentioned characters through the called-out prompt box.
[0197] In some embodiments of the present application, as Figure 16 shown, the prompt module 31 includes:
[0198] A third prompt unit 313, configured to call out a corresponding prompt box for a second mentioned character input into the target prompt box among the at least one target mentioned character by using the target input event, and prompt the rich text data corresponding to the second mentioned character through the called-out prompt box.
[0199] In some embodiments of the present application, as Figure 16 shown, the prompt module 31 may further be configured to, before prompting the rich text data corresponding to at least some of the target mentioned characters through at least one prompt box, determine the prompt data of each rich text data corresponding to at least some of the target mentioned characters, so as to prompt the rich text data corresponding to at least some of the target mentioned characters through the at least one prompt box based on the prompt data, where the prompt data is obtained by abstracting the rich text data.
[0200] In some embodiments of the present application, as Figure 16 shown, the data processing device provided in this embodiment may further include:
[0201] A monitoring module 39, configured to respectively execute for each target input box included in the front-end interface: if an input event related to input in the input box is monitored for the front-end interface, search for a preset mentioned character in the data input in the target input box; if a preset mentioned character is found, it is monitored that a target mentioned character is input in the target input box, and the target mentioned character is the preset mentioned character in the input data.
[0202] In some embodiments of the present application, as Figure 16 shown, if the prompt box includes a filtering box, then the prompt module 31 may further be configured to, if it is monitored that a character is input in the filtering box, filter out candidate rich text data including the input character from the rich text data corresponding to the target mentioned character, and retain the prompt of the candidate rich text data by the prompt box.
[0203] In some embodiments of the present application, as Figure 16As shown in the figure, the data processing device provided in this embodiment may further include:
[0204] A moving module 40, configured to, after a replacement module 33 replaces corresponding target mentioned characters in the target input box with target rich text data having corresponding display styles based on the target display style data, if it is detected that the target input box does not have a defocus event, move the cursor in the target input box to after the target rich text data.
[0205] In some embodiments of the present application, as Figure 16 shown in the figure, the data processing device provided in this embodiment may further include:
[0206] A sending module 41, configured to, after a replacement module 33 replaces corresponding target mentioned characters in the target input box with target rich text data having corresponding display styles based on the target display style data, if a sending instruction for instructing to send the data in the target input box to a backend corresponding to the front-end interface is received, convert the data in the target input box into plain text data, and send the plain text data and the data type of the data in the target input box to the backend, so that the backend performs corresponding service processing on the plain text data based on the data type.
[0207] In some embodiments of the present application, as Figure 16 shown in the figure, the data processing device provided in this embodiment may further include:
[0208] A customization module 42, configured to, if a customization instruction for at least one mentioned character is obtained, respectively execute for each of the mentioned characters: determine the input box applicable to the mentioned character in the front-end interface, collect rich text data applicable to the services supported by the front-end interface and allowed to be input into the determined input box, and establish a correspondence relationship between the mentioned character and the rich text data.
[0209] In the data processing device provided in the embodiments of the present application, the detailed explanations adopted during the operation of each functional module can refer to the corresponding detailed explanations in the above data processing method embodiments, which will not be elaborated here.
[0210] Further, an embodiment of the present application further provides a computer-readable storage medium, where the storage medium includes a stored program, and when the program runs, it controls the device where the storage medium is located to execute the above data processing method.
[0211] Further, an embodiment of the present application further provides an electronic device, where the electronic device includes: a memory for storing a program; a processor coupled to the memory for running the program to execute the above data processing method.
[0212] In the above embodiments, the descriptions of the various embodiments have their own emphases. For parts not detailed in a certain embodiment, reference may be made to the relevant descriptions of other embodiments.
[0213] It can be understood that the relevant features in the above methods and devices can be referred to each other. In addition, the "first", "second", etc. in the above embodiments are used to distinguish the embodiments, and do not represent the advantages or disadvantages of the embodiments.
[0214] Those skilled in the art can clearly understand that for the convenience and brevity of description, the specific working processes of the systems, devices, and units described above can refer to the corresponding processes in the foregoing method embodiments, and will not be elaborated herein.
[0215] The algorithms and displays provided herein are not inherently related to any particular computer, virtual system, or other device. Various general-purpose systems can also be used in conjunction with the teachings herein. The structure required to construct such systems will be apparent from the above description. In addition, the present application is not directed to any specific programming language. It should be understood that the content of the present application described herein can be implemented using various programming languages, and the descriptions of specific languages above are for disclosing the preferred embodiments of the present application.
[0216] In addition, the memory may include non-permanent memory in a computer-readable medium, in the form of random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM, and the memory includes at least one storage chip.
[0217] Those skilled in the art should understand that the embodiments of the present application can be provided as a method, a system, or a computer program product. Therefore, the present application can take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present application can take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.
[0218] The present application is described with reference to the flowcharts and / or block diagrams of methods, apparatuses (systems), and computer program products according to the embodiments of the present application. It should be understood that each flow and / or block in the flowcharts and / or block diagrams, and the combination of flows and / or blocks in the flowcharts and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to the processors of general-purpose computers, special-purpose computers, embedded processors, or other programmable data splicing devices to generate a machine, so that the instructions executed by the processors of the computer or other programmable data splicing devices generate for implementing the process Figure 1One or more processes and / or blocks Figure 1 Apparatus for the functions specified in one or more blocks
[0219] These computer program instructions can also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, such that the instructions stored in the computer-readable memory produce a manufacture including an instruction device that implements the functions in the process Figure 1 One or more processes and / or blocks Figure 1 The functions specified in one or more blocks
[0220] These computer program instructions can also be loaded onto a computer or other programmable data processing device, such that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, and thus the instructions executed on the computer or other programmable device provide steps for implementing the functions in the process Figure 1 One or more processes and / or blocks Figure 1 The steps of the functions specified in one or more blocks
[0221] In a typical configuration, a computing device includes one or more processors (CPUs), an input / output interface, a network interface, and memory
[0222] The memory may include non-permanent memory in the form of computer-readable media, random access memory (RAM), and / or non-volatile memory such as read-only memory (ROM) or flash memory (flash RAM). Memory is an example of computer-readable media
[0223] Computer-readable media includes permanent and non-permanent, removable and non-removable media that can store information by any method or technology. The information can be computer-readable instructions, data structures, program modules, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassette tapes, tape magnetic disk storage or other magnetic storage devices, or any other non-transmission media that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transitory computer-readable media, such as modulated data signals and carrier waves
[0224] It should also be noted that the term "comprising", "including" or any other variant thereof is intended to cover non-exclusive inclusion, such that a process, method, commodity or device comprising a series of elements not only includes those elements but also includes other elements not expressly listed, or further includes elements inherent to such process, method, commodity or device. Without further limitation, an element defined by the statement "comprising an..." does not exclude the presence of additional identical elements in the process, method, commodity or device comprising the element.
[0225] Those skilled in the art should understand that the embodiments of the present application can be provided as a method, system or computer program product. Therefore, the present application can take the form of a complete hardware embodiment, a complete software embodiment or an embodiment combining software and hardware aspects. Moreover, the present application can take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.
[0226] The above are only embodiments of the present application and are not used to limit the present application. For those skilled in the art, various changes and modifications can be made to the present application. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included within the scope of the claims of the present application.
Claims
1. A data processing method, characterized in that, The method includes: If it is detected that at least one target mentioned character is input in any target input box of the front-end interface, at least one hint box is used to hint rich text data corresponding to at least some of the target mentioned characters, and the rich text data is data applicable to the service supported by the front-end interface and allowed to be input into the target input box; If there is selected target rich text data in the hinted rich text data, obtain target display style data applicable to the target rich text data, and the display style indicated by the target display style data is used to reflect the data type of the target rich text data; Based on the target display style data, replace the corresponding target mentioned characters in the target input box with target rich text data having the corresponding display style.
2. The method according to claim 1, wherein The method further includes: Select a target input box from the input boxes included in the front-end interface. The target input box is an input box that needs to input rich text data based on the mentioned characters and is set as a block-level element with the content editable attribute; For each selected target input box, respectively execute: configure at least one preset display style data as the attribute value of the content editable attribute corresponding to the target input box, so that the target input box set as a block-level element can display rich text data in the display style indicated by the preset display style data based on the attribute value of the content editable attribute.
3. The method according to claim 2, wherein The method further includes: If there is an abnormal mentioned character in the at least one target mentioned character, and the abnormal mentioned character is a target mentioned character in the input box that has not been successfully replaced with target rich text data having the corresponding display style based on the corresponding target display style data, then incrementally add the corresponding target display style data as the attribute value of the content editable attribute corresponding to the target input box; After the incremental addition is successful, execute the step of replacing the abnormal mentioned character in the target input box with target rich text data having the corresponding display style based on the corresponding target display style data.
4. The method according to claim 1, characterized in that Obtaining the target display style data applicable to the target rich text data includes: if it is determined that the user currently using the front-end interface used the display style data customized by the user for the target rich text data the last time the front-end interface was used, obtain the display style data customized by the user as the target display style data applicable to the target rich text data; Or, Each rich text data has corresponding default display style data. Then, obtaining the target display style data applicable to the target rich text data includes: obtaining the corresponding default display style data of the target rich text data as the target display style data applicable to the target rich text data.
5. The method according to claim 1, characterized in that, Before presenting the rich text data corresponding to the target mentioned character through a tooltip, the method further includes: determining a positioning reference coordinate for presenting the tooltip, where the positioning reference coordinate is the coordinate corresponding to the cursor of the target mentioned character in a target coordinate system, or the positioning reference coordinate is the coordinate corresponding to the target vertex of the target input box in the target coordinate system, and the target coordinate system is the screen coordinate system of the screen displaying the front-end interface; determining, based on the positioning reference coordinate and the size data of the tooltip, the vertex coordinate corresponding to a specified vertex in the tooltip in the target coordinate system, where the vertex coordinate satisfies that the tooltip does not obscure the target input box after being presented; setting the display area of the tooltip based on the vertex coordinate and the size data. Or, Before presenting the rich text data corresponding to the target mentioned character through a tooltip, the method further includes: determining a positioning reference coordinate for presenting the tooltip, where the positioning reference coordinate is the coordinate corresponding to the cursor of the target mentioned character in a target coordinate system, or the positioning reference coordinate is the coordinate corresponding to the target vertex of the target input box in the target coordinate system, and the target coordinate system is the screen coordinate system of the screen displaying the front-end interface; if the positioning reference coordinate is not within the main display area for presenting tooltips in the screen coordinate system, then determining the main display area as the display area of the tooltip; if the positioning reference coordinate is within the main display area, then determining the alternate display area for presenting tooltips in the screen coordinate system as the display area of the tooltip, where the alternate display area does not overlap with the main display area.
6. The method according to claim 1, characterized in that Before presenting the rich text data corresponding to the target mentioned character through a tooltip, the method further includes: obtaining target tooltip style data corresponding to the user information of the user currently using the front-end interface, where each user information has corresponding tooltip style data; constructing a tooltip having the appearance style indicated by the target tooltip style data. Or, Before presenting the rich text data corresponding to the target mentioned character through a tooltip, the method further includes: if it is monitored that the user currently using the front-end interface has customized personalized tooltip style data, then constructing a tooltip having the appearance style indicated by the personalized tooltip style data; if it is monitored that the user currently using the front-end interface has not customized personalized tooltip style data, then obtaining preset default tooltip style data and constructing a tooltip having the appearance style indicated by the default tooltip style data.
7. The method according to any one of claims 1-6, characterized in that, Presenting the rich text data corresponding to at least some of the target mentioned characters through at least one tooltip includes: for each of the target mentioned characters, respectively performing: invoking a corresponding tooltip for the target mentioned character and presenting the rich text data corresponding to the target mentioned character through the invoked tooltip. Or, Rich text data corresponding to at least some of the target mention characters is prompted through at least one hint box, including: if there is at least one first mention character in the target input box for which the hint box has not been called out, when the cursor is again located after any of the first mention characters, the hint box corresponding to any of the first mention characters is called out, and the rich text data corresponding to any of the first mention characters is prompted through the called-out hint box; Or, Rich text data corresponding to at least some of the target mention characters is prompted through at least one hint box, including: for the second mention characters input into the target hint box among the at least one target mention characters using the target input event, the corresponding hint box is called out, and the rich text data corresponding to the second mention characters is prompted through the called-out hint box.
8. The method according to any one of claims 1 to 6, characterized in that, Before rich text data corresponding to at least some of the target mention characters is prompted through at least one hint box, the method further includes: determining hint data for each rich text data corresponding to at least some of the target mention characters, so as to prompt the rich text data corresponding to at least some of the target mention characters based on the hint data through the at least one hint box, and the hint data is obtained by abstracting the rich text data; And / or, The method further includes: for each target input box included in the front-end interface, respectively: if an input event related to input in the input box is monitored for the front-end interface, then a preset mention character is searched for in the data input in the target input box; if the preset mention character is found, it is monitored that a target mention character is input in the target input box, and the target mention character is the preset mention character in the input data; And / or, If the hint box includes a filtering box, then the method further includes: if it is monitored that a character is input in the filtering box, candidate rich text data including the input character is filtered out from the rich text data corresponding to the target mention character, and the hint of the candidate rich text data by the hint box is retained; And / or, After replacing the corresponding target mention character in the target input box with target rich text data having a corresponding display style based on the target display style data, the method further includes: if it is monitored that the target input box has not had a blur event, the cursor in the target input box is moved to after the target rich text data; And / or, After replacing the corresponding target mention character in the target input box with target rich text data having a corresponding display style based on the target display style data, the method further includes: if a send instruction for instructing to send the data in the target input box to the back-end corresponding to the front-end interface is received, the data in the target input box is converted into plain text data, and the plain text data and the data type of the data in the target input box are sent to the back-end, so that the back-end performs corresponding service processing on the plain text data based on the data type; And / or, The method further includes: if a customization instruction for at least one mentioned character is obtained, then for each of the mentioned characters, respectively perform: determining an input box applicable to the mentioned character in the front-end interface, collecting rich text data applicable to the service supported by the front-end interface and allowed to be input into the determined input box, and establishing a correspondence relationship between the mentioned character and the rich text data.
9. A data processing device, characterized in that, The device includes: A prompt module, configured to, if it is monitored that at least one target mentioned character is input in any target input box of the front-end interface, prompt rich text data corresponding to at least some of the target mentioned characters through at least one prompt box, where the rich text data is data applicable to the service supported by the front-end interface and allowed to be input into the target input box; An acquisition module, configured to, if there is selected target rich text data in the prompted rich text data, acquire target display style data applicable to the target rich text data, where the display style indicated by the target display style data is used to reflect the data type of the target rich text data; A replacement module, configured to, based on the target display style data, replace the corresponding target mentioned character in the target input box with the target rich text data having the corresponding display style.
10. A computer-readable storage medium, characterized in that, The storage medium includes a stored program, wherein when the program runs, it controls the device where the storage medium is located to execute the data processing method according to any one of claims 1 to 8.
11. An electronic device, characterized in that, The electronic device includes: A memory, configured to store a program; A processor, coupled to the memory, configured to run the program to execute the data processing method according to any one of claims 1 to 8.
Citation Information
Cited By
Method and system for realizing document editing based on rich text
CN121168418A
Interactive processing method for mentioning functions and related device
CN121387091A