Form item linkage prompting method and device

Abstract

The invention discloses a form item linkage prompting method and device, and relates to the technical field of front ends. According to the main technical scheme, when a linkage triggering event is monitored at the position of a target element in a webpage, a linkage instruction corresponding to the linkage event is obtained; as the instruction file of the linkage instruction at least stores the forward dependency relationship between the target element and each form item and the linkage prompt effect represented by the forward dependency relationship, the linkage prompt effect can be displayed at the position of each form item which the target element forwards depends on by utilizing the linkage instruction, and the linkage prompt effect can be displayed at the position of each form item which the target element forwards depends on. The linkage prompt information is efficiently and accurately represented, and the prompt effect can be intuitively and strikingly transmitted to the user, so that a more optimized form item linkage prompt solution is provided, and high-quality use experience is provided for the user.

Description

Technical Field

[0001] The present disclosure relates to the field of front-end technology, and in particular to a form item linkage prompt method and device. Background Art

[0002] In front-end development, form item linkage means that when the value of a form item in a form changes, the values ​​of other related form items will also change. This linkage relationship can be regarded as a set of dependencies between a group of form items. And with the rise of some front-end frameworks and the popularization of related component libraries, better code maintainability and scalability can be achieved in front-end development.

[0003] At present, in the development and design of form item linkage, the focus is often on code development, while better improvement and optimization of linkage design in front-end applications are neglected. For example, linkage prompts are only implemented by highlighting prompts, text prompts, or pop-up text prompts on web pages. Such a single linkage operation is difficult to efficiently and accurately express the linkage prompt information, making it impossible for users to intuitively and quickly understand the linkage prompt relationship between various form items. Summary of the invention

[0004] The present disclosure provides a form item linkage prompt method and device, the main purpose of which is to execute a linkage instruction when a linkage event is monitored to trigger a target element, so as to display a linkage prompt effect at each form item position that the target element forward depends on, so as to efficiently and accurately represent the linkage prompt information, and facilitate users to intuitively and quickly understand the linkage prompt relationship between each form item, so that the present application provides a more optimized form item linkage prompt solution.

[0005] In order to achieve the above objectives, the present disclosure mainly provides the following technical solutions:

[0006] A first aspect of the present disclosure provides a form item linkage prompt method, the method comprising:

[0007] When a linkage event is triggered at the position of a target element in a webpage, a linkage instruction corresponding to the linkage event is obtained, wherein the instruction file corresponding to the linkage instruction stores at least: a forward dependency relationship between the target element and at least one form item that is forward dependent on it, and a linkage prompt effect represented by the forward dependency relationship;

[0008] Based on executing the linkage instruction, determining the form item having the forward dependency relationship with the target element;

[0009] The linkage prompt effect is displayed at a position corresponding to the form item in the webpage.

[0010] In some modified embodiments, the forward dependency relationship includes multiple dependency levels, and the step of determining the form item having the forward dependency relationship with the target element based on executing the linkage instruction includes:

[0011] By traversing the forward dependency relationship, determining a first preceding form item of the forward dependency corresponding to the target element;

[0012] Marking the first front-end form item as a first-level form item;

[0013] By traversing the forward dependency relationship, determining a second preceding form item to which the first preceding form item corresponds to a forward dependency;

[0014] Marking the second front-end form item as a second-level form item;

[0015] The forward dependency relationship operation is iteratively performed until it is determined that there is no dependent predecessor form item.

[0016] In some modified embodiments, displaying the linkage prompt effect at the position corresponding to the form item in the webpage includes:

[0017] Determine the location of one or more levels of form items that have the forward dependency relationship with the target element in the web page;

[0018] At the location of each level of form items, the corresponding linkage prompt effects are displayed.

[0019] In some modified embodiments, the display of corresponding linkage prompt effects at the locations of the form items at each level includes:

[0020] When monitoring that a cursor is placed on any one of the target form items among the form items that have the forward dependency relationship with the target element, determining a target form item level to which a target preceding form item corresponding to the target form item belongs, and / or one or more target dependent level form items corresponding to the target form item, wherein the target dependent level form items have a forward dependency relationship with the target form item;

[0021] At the location of the target front form item, the linkage prompt effect corresponding to the target form item level is displayed, and / or, at the location of each target dependent level form item, the linkage prompt effect corresponding to each target dependent level form item is displayed.

[0022] In some modified embodiments, the processing of the linkage instruction includes:

[0023] Adding a first identifier to the target element;

[0024] Adding a second identifier to at least one of the form items;

[0025] Establishing a second forward dependency relationship between the first identifier and the second identifier based on a first forward dependency relationship between the target element and at least one form item that is forward dependent on the target element;

[0026] According to the equivalent relationship between the first forward dependency relationship and the second forward dependency relationship, the linkage prompt effect represented by the first forward dependency relationship is associated with the second forward dependency relationship;

[0027] The association relationship between the second forward dependency relationship and the linkage prompt effect is stored in the instruction file.

[0028] In some modified embodiments, the first forward dependency relationship includes multiple dependency levels, and the establishing of a second forward dependency relationship between the first identifier and the second identifier includes:

[0029] Taking the target element as the path starting point, and performing a traversal operation on the form items according to the first forward dependency relationship between the target element and the form item;

[0030] In the process of performing the form item traversal operation, a tree structure consisting of the target element and the form item as nodes is established according to the order of traversing the form items;

[0031] A second forward dependency relationship between the first identifier and the second identifier is established according to the tree structure.

[0032] In some modified embodiments, the second identifier is an index identifier corresponding to the form item as a DOM element in the webpage, and before displaying the linkage prompt effect, determining the position of the form item in the webpage includes:

[0033] Obtaining a DOM structure corresponding to the webpage by parsing the HTML elements contained in the webpage;

[0034] According to the second identifier corresponding to the form item, determining the position of the form item in the DOM structure by traversing the DOM structure;

[0035] The position of the form item in the webpage is determined according to the position of the form item in the DOM structure.

[0036] A second aspect of the present disclosure provides a form item linkage prompt device, the device comprising:

[0037] An acquisition unit is used to acquire a linkage instruction corresponding to the linkage event when a linkage event is triggered at a target element position in a webpage, wherein the instruction file corresponding to the linkage instruction stores at least: a forward dependency relationship between the target element and at least one form item that is forward dependent on it, and a linkage prompt effect represented by the forward dependency relationship;

[0038] A determination unit, configured to determine, based on executing the linkage instruction, a form item having the forward dependency relationship with the target element;

[0039] The display unit is used to display the linkage prompt effect at the position corresponding to the form item in the webpage.

[0040] In some modified embodiments, if the forward dependency relationship includes multiple dependency levels, the determining unit includes:

[0041] A first determination module, configured to determine a first preceding form item of the forward dependency corresponding to the target element by traversing the forward dependency relationship;

[0042] A marking module, used for marking the first front form item as a first-level form item;

[0043] The first determining module is further configured to determine, by traversing the forward dependency relationship, a second preceding form item to which the first preceding form item corresponds to a forward dependency;

[0044] The marking module is further used to mark the second front form item as a second-level form item;

[0045] The execution module is used to iteratively execute the forward dependency relationship operation until it is determined that the dependent preceding form item does not exist.

[0046] In some modified embodiments, the display unit includes:

[0047] A second determination module is used to determine the location of one or more levels of form items that have the forward dependency relationship with the target element in the web page;

[0048] The display module is used to display the corresponding linkage prompt effects at the location of each level of form items.

[0049] In some modified embodiments, the display module is specifically used for:

[0050] When monitoring that a cursor is placed on any one of the target form items among the form items that have the forward dependency relationship with the target element, determining a target form item level to which a target preceding form item corresponding to the target form item belongs, and / or one or more target dependent level form items corresponding to the target form item, wherein the target dependent level form items have a forward dependency relationship with the target form item;

[0051] At the location of the target front form item, the linkage prompt effect corresponding to the target form item level is displayed, and / or, at the location of each target dependent level form item, the linkage prompt effect corresponding to each target dependent level form item is displayed.

[0052] In some modified embodiments, the linkage instruction is optimized, and the device further comprises:

[0053] An adding unit, used for adding a first identifier to the target element;

[0054] The adding unit is further used to add a second identifier to at least one of the form items;

[0055] an establishing unit, configured to establish a second forward dependency relationship between the first identifier and the second identifier based on a first forward dependency relationship between the target element and at least one form item that is forward dependent on the target element;

[0056] The establishing unit is further configured to establish an association between the linkage prompt effect represented by the first forward dependency and the second forward dependency according to an equivalent relationship between the first forward dependency and the second forward dependency;

[0057] A storage unit is used to store the association relationship between the second forward dependency and the linkage prompt effect in the instruction file.

[0058] In some modified embodiments, the first forward dependency relationship includes multiple dependency levels, and the establishing unit includes:

[0059] A traversal module, configured to use the target element as a path starting point and perform a traversal operation on the form items according to the first forward dependency relationship between the target element and the form item;

[0060] An establishing module, used for establishing a tree structure composed of the target element and the form item as nodes according to the order of traversing the form items during the process of performing the form item traversal operation;

[0061] The establishing module is further used to establish a second forward dependency relationship between the first identifier and the second identifier according to the tree structure.

[0062] In some modified embodiments, the second identifier is an index identifier corresponding to the form item as a DOM element in the webpage, and before displaying the linkage prompt effect, the determining unit is further specifically configured to:

[0063] Obtaining a DOM structure corresponding to the webpage by parsing the HTML elements contained in the webpage;

[0064] According to the second identifier corresponding to the form item, determining the position of the form item in the DOM structure by traversing the DOM structure;

[0065] The position of the form item in the webpage is determined according to the position of the form item in the DOM structure.

[0066] A third aspect of the present disclosure provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the form item linkage prompt method as described above is implemented.

[0067] A fourth aspect of the present disclosure provides an electronic device, comprising at least one processor, and at least one memory and a bus connected to the processor; wherein the processor and the memory communicate with each other via the bus; and the processor is used to call program instructions in the memory to execute the form item linkage prompt method as described above.

[0068] A fifth aspect of the present disclosure provides a computer program product, including a computer program / instruction, which implements the form item linkage prompt method as described above when executed by a processor.

[0069] By means of the above technical solution, the technical solution provided by the present disclosure has at least the following advantages:

[0070] The present disclosure provides a form item linkage prompt method and device. When a linkage event is triggered at the position of a target element in a web page, the present disclosure will obtain a linkage instruction corresponding to the linkage event. Since the instruction file of the linkage instruction at least stores: the forward dependency relationship between the target element and each form item, and the linkage prompt effect represented by the forward dependency relationship. Therefore, based on the linkage instruction executed by the present disclosure, it will be determined which form items have a forward dependency relationship with the target element, and the linkage prompt effect will be displayed according to the position of these form items in the web page.

[0071] Compared with the prior art, which has the technical problem of being difficult to efficiently and accurately represent the linkage prompt information due to the use of the existing linkage prompt operation, the present invention utilizes linkage instructions to display the linkage prompt effect at each form item position that the target element forward depends on, thereby achieving efficient and accurate representation of the linkage prompt information, and being able to convey the prompt effect to the user intuitively and prominently, thereby providing a more optimized form item linkage prompt solution and providing users with a high-quality usage experience.

[0072] The above description is only an overview of the technical solution of the present disclosure. In order to more clearly understand the technical means of the present disclosure, it can be implemented according to the contents of the specification. In order to make the above and other purposes, features and advantages of the present disclosure more obvious and easy to understand, the specific implementation methods of the present disclosure are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0073] Various other advantages and benefits will become apparent to those of ordinary skill in the art by reading the detailed description of the preferred embodiments below. The accompanying drawings are only for the purpose of illustrating the preferred embodiments and are not to be considered as limiting the present disclosure. Also, the same reference symbols are used throughout the accompanying drawings to represent the same components. In the accompanying drawings:

[0074] Figure 1 A flowchart of a form item linkage prompt method provided by an embodiment of the present disclosure;

[0075] Figure 2 A schematic diagram of a target element and its forward-dependent form items exemplified in an embodiment of the present disclosure;

[0076] Figure 3 A flow chart of another form item linkage prompt method provided by an embodiment of the present disclosure;

[0077] Figure 4 A block diagram of a form item linkage prompt device provided by an embodiment of the present disclosure;

[0078] Figure 5 A block diagram of another form item linkage prompt device provided by an embodiment of the present disclosure;

[0079] Figure 6 An electronic device is provided in accordance with an embodiment of the present disclosure. DETAILED DESCRIPTION

[0080] The 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 accompanying 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 to enable a more thorough understanding of the present disclosure and to fully convey the scope of the present disclosure to those skilled in the art.

[0081] At present, in the development and design of form item linkage, the focus is often on code development, while the improvement and optimization of linkage design in front-end applications are neglected, making the form item linkage operation relatively simple and single, such as highlight prompts, text prompts or pop-up text prompts, etc., and specific examples are as follows:

[0082] (1) Highlighting: Generally, some form items are highlighted on a web page. However, when the dependencies are complex, it is impossible to know which form items should be filled in first or which other form items they depend on.

[0083] (2) Text prompts: Generally, text is used in web pages to describe the dependency relationship between various form items to achieve text linkage prompts. However, since text is a language symbol, it needs to be read and understood, which takes time for users to clearly understand what the linkage prompts are. It can be seen that although this linkage prompt method expresses the dependency relationship, it is time-consuming and requires users to have experience, professional knowledge and good comprehension ability. The effect of such linkage prompts is not intuitive and efficient.

[0084] (3) Pop-up prompts: Generally, pop-up boxes and text descriptions are added to the web page to prompt users. However, the same problem of text understanding exists as with "text prompts". In addition, although the use of pop-up boxes is more intuitive and eye-catching, it is necessary to design the timing of the pop-up box display / disappearance. Otherwise, it will take up too much display resources on a web page of limited size, which will affect the user's experience of browsing the content on the web page.

[0085] As described above, the inventors have found that in the development and design of the linkage of form items, either the linkage prompts implemented are not eye-catching (such as highlight prompts), or the cost of implementing eye-catching linkage prompts is high and the operation is too complicated (such as text prompts, pop-up prompts). In short, these methods are difficult to efficiently and accurately express the linkage prompt information.

[0086] To this end, the inventors have studied that if the forward dependency relationship between each form item can be displayed on the web page while reducing the complexity of designing the linkage prompt effect, it will be convenient for users to intuitively and quickly understand the linkage prompt relationship between each form item. This will greatly improve the user experience in the linkage of form items.

[0087] Based on the above considerations, the present disclosure provides a form item linkage prompt method, the specific method is as follows: Figure 1 As shown, the execution subject may be a terminal or a device loaded on the terminal, and the device may be a browser. Figure 1 The illustrated embodiment includes at least 101-103, and the embodiment of the present disclosure does not limit the execution order of the scheme steps by numerical numbers.

[0088] 101. When a triggering linkage event is monitored at a target element position in a webpage, a linkage instruction corresponding to the linkage event is obtained.

[0089] Among them, the target element is a form item in a web page. A form item is an input element that constitutes an HTML form, such as, but not limited to, a text box, a password box, a radio button, a check box, a drop-down list, a submit button, etc. Such elements are used in front-end applications to allow users to input and submit data to the server.

[0090] In front-end development, there can be forward dependencies between multiple form items. In the context of form items, this forward dependency can be understood as: the value or state of "one form item" depends on the value or state of "another form item", and this dependency is directional, that is, from "one form item" to "another form item", that is, "one form item" is forward dependent on "another form item", and "another form item" is a prerequisite for "one form item". Correspondingly, in front-end applications, this forward dependency is manifested as: if you want to successfully operate "one form item", you need to operate "another form item" first.

[0091] For example, in front-end development, there are two form items in the web page, such as a text box and a "submit button", and the pointing relationship between the two form items is that the "submit button" is forward dependent on the text box. Therefore, the operation control implemented on the front-end application is that if you want to successfully operate the "submit button", you need to operate the text box first (that is, perform the filling text box operation).

[0092] The disclosed embodiment can pre-set different linkage events for different target elements, for example, the linkage event is set for the target element "Submit Button" in the web page, and one or more text boxes of its forward dependency are pre-filled, so that when the target element in the web page is clicked, the linkage prompt effect is displayed on the multiple text boxes of its forward dependency. In addition, to ensure that the linkage event can be executed, the disclosed embodiment pre-associates the linkage event to a specific linkage instruction, and the instruction file of the linkage instruction is set to store at least: the forward dependency relationship between the target element and at least one form item of its forward dependency, and the linkage prompt effect corresponding to the representation of the forward dependency relationship. Therefore, when a linkage event is triggered by monitoring in the web page, the linkage instruction associated with the linkage event can be called, and according to the data information in the instruction file corresponding to the linkage instruction, the various form items of the forward dependency and the linkage prompt effects that can be displayed can be further determined.

[0093] Regarding the operation of triggering linkage events, in order to increase the linkage interaction with the user, the embodiments of the present disclosure can be pre-set to, but not limited to: hovering the mouse over the target element, voice controlling the cursor to move to the target element for control clicking, and other methods, thereby triggering the linkage events implemented by the present disclosure.

[0094] 102. Based on the execution linkage instruction, determine the form item that has a forward dependency relationship with the target element.

[0095] 103. Display the linkage prompt effect at the corresponding position of the form item in the web page.

[0096] In the disclosed embodiment, based on executing the linkage instruction, the form items that have a forward dependency relationship with the target element are determined from the instruction file, and then the linkage prompt effect is displayed at the location of each form item that the target element forward depends on in the web page.

[0097] In order to increase the intuitiveness and eye-catchingness of the linkage prompt effect, the embodiment of the present disclosure can pre-set the linkage prompt effect including static effect or dynamic effect, wherein the static effect can be but not limited to highlighting by color or font change, and the dynamic effect can be but not limited to animation or dynamic flashing, or the use of Cascading Style Sheets (CSS) animation.

[0098] For the forward dependency relationship between the target element and at least one of its forward dependent form items, it may include one or more dependency levels. Accordingly, for the case of one dependency level or multiple dependency levels, the disclosed embodiments may provide a variety of linkage prompt effects to increase the intuitiveness and eye-catchingness of the linkage prompt effects, thereby more efficiently and accurately presenting linkage prompt information to the user. Specifically, in combination with Figure 2 Each form item in the web page shown is explained in detail.

[0099] In some embodiments, for a forward dependency that includes a dependency level, Figure 2 A displayed web page includes a "one-click submit button", three form items "project name", "service name" and "cluster group code", and pre-customized linkage instructions for the "one-click submit button" and instruction files corresponding to the linkage instructions. In the instruction file, the forward dependency relationship of the target element ("one-click submit button") and the forward dependency relationship of the above three form items, and the linkage prompt effect represented by the forward dependency relationship (for example, the "shaking left and right" animation effect) are pre-stored.

[0100] Then, when the linkage event is detected on the "one-click submit button" on the web page, the linkage instruction corresponding to the linkage event is obtained, and after the linkage instruction is called, the three form items "project name", "service name", and "cluster group code" that the "one-click submit button" depends on are determined based on the instruction file corresponding to the linkage instruction, as well as the positions of these three form items on the web page, and the "left and right shaking" animation effect is displayed at the position. The linkage prompt provided by this is: if you want to click the "one-click submit button", you must fill in the data information in the three form items "project name", "service name", and "cluster group code" on the web page.

[0101] In other embodiments, for the case where the forward dependency relationship includes multiple dependency levels, such as Figure 2 The displayed web page includes a "one-click submit button", three form items "project name", "service name", and "cluster group code", and the linkage instruction of the "one-click submit button" and the instruction file corresponding to the linkage instruction are pre-defined. The forward dependency relationship stored in the instruction file is: the target element ("one-click submit button") is forward dependent on the form item "cluster group code", the form item "cluster group code" is forward dependent on the form item "service name", and the form item "service name" is forward dependent on "project name", so Figure 2 There are three levels of dependencies between form items in a web page.

[0102] The linkage prompt effects set for different dependency levels in the disclosed embodiments can be the same or different, and the display time, display frequency and display order can be set for the linkage prompt effects of different dependency levels. The settings can also include: only displaying the linkage prompt effect of the previous adjacent dependency level, or simultaneously displaying the linkage prompt effects of all dependency levels of the forward dependency.

[0103] For example, combined with Figure 2 For the forward dependency relationship of multiple dependency levels that exist in the webpage, for the linkage prompt effect of only displaying the previous adjacent dependency level, for example, when a linkage event is triggered on the "one-click submit button" monitored on the webpage, the linkage instruction corresponding to the linkage event is obtained, and after calling the linkage instruction, based on the instruction file corresponding to the linkage instruction, according to the linkage prompt effects corresponding to different dependency levels stored in the instruction file, the forward dependency level associated with the "one-click submit button" and the linkage prompt effect corresponding to the forward dependency level are obtained to display the linkage prompt information including: If you want to click the "one-click submit button", you must first fill in the "cluster group code" on the webpage.

[0104] Also, for the linkage prompt effects of all dependency levels of the forward dependency that are displayed at the same time, for example, when Dangdang listens to the linkage event triggered on the "one-click submit button" on the web page, it obtains the linkage instruction corresponding to the linkage event, and after calling the linkage instruction, based on the instruction file corresponding to the linkage instruction, according to the linkage prompt effects corresponding to different dependency levels stored in the instruction file, starting with the form item "one-click submit button", each dependency level and its corresponding linkage prompt effect are determined one by one, and according to the order of forward and backward dependencies between each dependency level, the linkage prompt information is displayed to the user, including: if you want to click the "one-click submit button", you must first fill in the "cluster group code"; if you want to fill in the "cluster group code", you must first fill in the "service name"; if you want to fill in the "service name", you must first fill in the "project name".

[0105] As described above, the embodiment of the present disclosure provides a form item linkage prompt method. When a linkage event is triggered at the position of a target element in a web page, the embodiment of the present disclosure will obtain the linkage instruction corresponding to the linkage event. Since the instruction file of the linkage instruction at least stores: the forward dependency relationship between the target element and each form item, and the linkage prompt effect represented by the forward dependency relationship. Therefore, based on the linkage instruction executed by the present disclosure, it will be determined which form items have a forward dependency relationship with the target element, and the linkage prompt effect will be displayed according to the position of these form items in the web page. Compared with the prior art, due to the use of the existing linkage prompt operation, it is difficult to efficiently and accurately express the technical problem of linkage prompt information. The present disclosure uses linkage instructions to display the linkage prompt effect at the position of each form item that the target element forward depends on, thereby achieving efficient and accurate expression of linkage prompt information, and can intuitively and eye-catchingly convey the prompt effect to the user, thereby providing a more optimized form item linkage prompt solution and providing users with a high-quality user experience.

[0106] In other embodiments, for example, when the forward dependency relationship includes multiple dependency levels, it is more complicated to execute the linkage instruction. In order to explain it in more detail, the embodiment of the present disclosure provides another form item linkage prompt method, such as Figure 3 As shown, the method provided by this embodiment of the present disclosure includes at least 201-208, and the embodiment of the present disclosure does not limit the execution order of the scheme steps by numerical numbers.

[0107] 201. When a triggering linkage event is monitored at a target element position in a webpage, a linkage instruction corresponding to the linkage event is obtained.

[0108] The instruction file corresponding to the linkage instruction stores at least: a forward dependency relationship between the target element and at least one form item of its forward dependency, and a linkage prompt effect represented by the forward dependency relationship. For a detailed explanation of the linkage instruction, the instruction file, and the "forward dependency relationship" in the instruction file, see step 101, which will not be repeated here.

[0109] However, it should be noted that in the disclosed embodiment, the forward dependency relationship includes multiple dependency levels. For example, in a web page, the target element depends on the preceding form item A, the preceding form item A depends on the preceding form item B, and the preceding form item B depends on the preceding form item C.

[0110] In the embodiments of the present disclosure, the form items corresponding to each dependency level may be one or more, and the linkage prompt effects corresponding to the form items at different dependency levels may be the same or different, thereby realizing flexible and eye-catching display of linkage prompts for form items at different dependency levels. As shown in 201, the data information stored in the instruction file corresponding to the linkage instruction provided by the embodiments of the present disclosure includes at least: the forward dependency relationship between the target element and at least one form item of its forward dependency, and the linkage prompt effect corresponding to the representation of the forward dependency relationship. Then, for the case where the forward dependency relationship includes multiple dependency levels, in order to efficiently and conveniently manage the multi-level forward dependency relationships and different linkage prompt effects, the embodiments of the present disclosure may, but are not limited to, optimize the instruction file corresponding to the linkage instruction by adopting the following (1)-(4).

[0111] (1) Add a first identifier to the target element and add a second identifier to each form item.

[0112] (2) A forward dependency relationship between the target element and at least one of its forward dependent form items is determined as a first forward dependency relationship, and based on the first forward dependency relationship, a second forward dependency relationship is established between the first identifier and the second identifier.

[0113] In the embodiment of the present disclosure, since the multi-level forward dependency relationship can form a multi-level traversal path, the embodiment of the present disclosure corresponds the target element and each form item to each node, so that the target element is used as the starting point of the path, and the operation of traversing the form items one by one is performed according to the forward dependency relationship between the target element and each form item, and according to the order of traversal one by one, a tree structure consisting of the target element and each form item as a node is established, so that the multi-level forward dependency relationship can be clearly described by using such a tree structure.

[0114] Furthermore, in order to facilitate the storage of such multi-level forward dependency relationships, the embodiment of the present disclosure adds identifiers to the target element and each form item in advance, wherein in order to distinguish them, the embodiment of the present disclosure uses the words "first" and "second" to mark the identifiers added to the target element and the form item respectively. The identifiers are used to occupy the nodes of the tree structure to establish a tree structure composed of the first identifier and the second identifier. The tree structure composed of the identifiers can clearly describe the forward dependency relationship between the target element and each form item.

[0115] (3) According to the equivalent relationship between the first forward dependency and the second forward dependency, the linkage prompt effect represented by the first forward dependency is associated with the second forward dependency.

[0116] It should be noted that after adding the first identifier to the target element and the second identifier to the form item, one identifier can specifically refer to the target element or a form item. Therefore, the multi-level forward dependency relationship established based on the target element and each form item is equivalent to the multi-level forward dependency relationship established based on the first identifier and the second identifier. In order to distinguish them, the embodiment of the present disclosure uses the words "first" and "second" to identify two equivalent forward dependencies.

[0117] After determining that the first forward dependency and the second forward dependency are equivalent, the embodiment of the present disclosure can establish a correlation between the second forward dependency and the linkage prompt effect by means of the linkage prompt effect represented by the first forward dependency.

[0118] For example, Figure 2 The web page shown and the multiple form items it contains have multi-level forward dependency relationships including: the target element ("one-click submit button") is forward dependent on the form item "cluster group code", the form item "cluster group code" is forward dependent on the form item "service name", and the form item "service name" is forward dependent on the "project name". Then, by adding a first identifier (such as A) to the target element ("one-click submit button") and adding different second identifiers (such as B, C, D) to other form items, the multi-level forward dependency relationship can be represented by the first identifier and the second identifier, that is, A depends on B, B depends on C, and C depends on D, and the linkage prompt effect on the forward dependency level of "A depends on B" is the same as the linkage prompt effect corresponding to the forward dependency relationship on the target element dependency form item "cluster group code".

[0119] (4) The association relationship between the second forward dependency relationship and the linkage prompt effect is stored in the instruction file.

[0120] As shown in (1)-(4), the disclosed embodiment uses identifiers to establish multiple dependency hierarchies to replace the multiple dependency hierarchies established between the target element and each form item, and uses identifiers to establish multiple dependency hierarchies to associate and represent different linkage prompt effects, thereby optimizing the instruction file corresponding to the linkage instruction, thereby reducing the amount of data stored in the instruction file. Especially in the case where there are more dependency hierarchies and more diverse linkage prompt effects, the optimized instruction file is more convenient for effectively managing the multiple dependency hierarchies and the linkage prompt effects represented thereon.

[0121] 202. Determine the first preceding form item of the forward dependency corresponding to the target element by traversing the forward dependency relationship in the instruction file.

[0122] 203. Mark the first front form item as a first-level form item.

[0123] 204. Determine, by traversing the forward dependency relationship in the instruction file, the second preceding form item to which the first preceding form item corresponds to the forward dependency.

[0124] 205. Mark the second front form item as a second-level form item.

[0125] 206. Iterate and execute the forward dependency traversal operation until it is determined that there is no dependent predecessor form item.

[0126] The disclosed embodiment will obtain the linkage instruction based on the linkage event triggered on the target element, and then execute steps 202-206 based on the linkage instruction, traverse the forward dependency relationship stored in the instruction file, and search for forward dependent form items at different levels.

[0127] On the basis of the optimized instruction file, the multi-dependency level forward dependency relationship composed of the first identifier and the second identifier is traversed. Since the forward dependency relationship is a tree structure composed of the first identifier and the second identifier, the node where the first identifier of the target element is located is used to start the level-by-level traversal search. If a form item is found at the next adjacent level, it is marked as a first-level form item, and the traversal search is continued. If a form item is still found at the next level, it is marked as a second-level form item. Therefore, based on the instruction file corresponding to the linkage instruction, it is possible to efficiently and accurately traverse and find which form items have a forward dependency relationship with the target element.

[0128] It should be noted that in order to facilitate the distinction between different levels, the embodiments of the present disclosure use the words "first" and "second" for identification, and according to the iterative search process, if there are more levels of search, the embodiments of the present disclosure may not be limited to the use of words "third", "fourth", etc. for marking.

[0129] 207. Determine the location of form items in the web page.

[0130] After determining the form items at different levels according to the forward dependency in the instruction file, the embodiment of the present disclosure needs to determine the location of the form items in the web page to increase the linkage prompt effect. In order to facilitate finding the location of the form items in the web page, the embodiment of the present disclosure can adopt the index identification auxiliary implementation method of the DOM element, including the following: (1)-(4).

[0131] (1) In the instruction file corresponding to the linkage instruction, in the multi-dependency-level forward dependency relationship composed of the first identifier and the second identifier, for the "first identifier" and the "second identifier", the embodiment of the present disclosure can use the index identifier of the DOM element in the DOM structure corresponding to the web page as the identification information. For example, in the DOM structure corresponding to the web page, the index identifier obtained by using the target element as the DOM element is used to fill in the identification information of the "first identifier", and the index identifier obtained by using each form item itself as the DOM element is used to fill in the identification information of different "second identifiers".

[0132] Document Object Model (DOM) is a programming interface for HTML and XML documents. It defines the structure of a document and how to access and modify the content, structure and style of a document. In DOM, a document is represented as a tree structure, where each HTML element or XML element is a node in the tree. In the disclosed embodiment, the form item is used as a DOM element, and the index identifier of the DOM element in the DOM structure is used as the second identifier corresponding to the form item.

[0133] (2) By parsing the HTML elements contained in the web page, the DOM structure corresponding to the web page is obtained.

[0134] (3) According to the second identifier corresponding to the form item, the position of the form item in the DOM structure is determined by traversing the DOM structure.

[0135] (4) Determine the position of the form item in the web page based on the position of the form item in the DOM structure.

[0136] As shown in (2)-(4), in the DOM structure, the location of the DOM element can be determined efficiently and accurately based on the index identifier. Therefore, the embodiment of the present disclosure processes the web page in advance to obtain the corresponding DOM structure, and then obtains the second identifier corresponding to the form item. Since the second identifier is the index identifier in the DOM structure, the position of the form item in the DOM structure can be determined efficiently, and then with the help of this position, the position in the web page can be indirectly determined.

[0137] 208. Display different linkage prompt effects at different levels of form items.

[0138] In the case where there are multiple dependency levels between form items in a web page, when it is monitored that the cursor is placed on any target form item, the target form item level to which the target preceding form item corresponding to the target form item belongs can be determined, or one or more target dependency level form items corresponding to the target form item can be further determined, and the target dependency level form items have a forward dependency relationship with the target form item.

[0139] For example, there are form items A, B, C, and D in a web page, and A is forward dependent on B, B is forward dependent on C, and C is forward dependent on D, so there are three dependency levels. When the cursor is monitored to be placed on any target form item, for example, when it is placed on B, the linkage event triggered on B will be monitored. According to the instruction file corresponding to the linkage instruction, it can be further determined which dependency level C, on which B is forward dependent, belongs to. If it belongs to the second dependency level in this example, then based on the second dependency level, the third dependency level of the forward dependency can also be further determined (such as C is forward dependent on D).

[0140] Accordingly, in the embodiment of the present disclosure, when the cursor is placed on a target form item, based on the triggered linkage event, a forward dependency level of an adjacent forward dependency can be obtained, or all forward dependency levels of the existing forward dependency can be obtained, thereby facilitating flexible selection, such as displaying the linkage prompt effect on only one dependency level, or displaying the linkage prompt effects on all previous dependency levels, thereby flexibly conveying the linkage prompt information to the user.

[0141] In some embodiments, for the multi-level forward dependency relationships between the various form items in the web page and the linkage prompt effects represented by each forward dependency relationship, the embodiments of the present disclosure can set the linkage prompt effects on each dependency level to be the same or different, and can set the display time, display frequency and display order for the linkage prompt effects of different dependency levels. Specifically, the following implementation method can be adopted:

[0142] In the instruction file corresponding to the linkage instruction, since it has been optimized to form a multi-dependency forward dependency relationship consisting of the first identifier and the second identifier, and the forward dependency relationship is actually a tree structure consisting of the first identifier and the second identifier, based on the path index contained in the tree structure itself, there is also a path index between the first identifier and the second identifier, and the path index is used to represent the forward dependency relationship between the first identifier and the second identifier. For example, in a web page, the identifiers "A, B, C, D" are used to identify four form items. Based on the forward dependency relationship between the four form items, A will be forward dependent on B, B will be forward dependent on C, and C will be forward dependent on D, and the path index will be A→B→C→D.

[0143] Then, based on such a path index, for any one of the form items, it can be determined whether the index distance between other form items and it is far or near. For example, in the above example, for form item A, B is closer to it in index distance, while D is farther from it in index distance.

[0144] In a forward dependency relationship of multiple dependency levels, especially for the case where form items of all forward dependency levels of any form item can be displayed, in addition to using different levels to display different linkage prompt effects to increase the distinction of reference, the embodiments of the present disclosure can also use such index distances to change the linkage prompt effects on different levels, such as setting constraints on display time and display frequency, such as the closer the index distance, the longer the display time and the higher the frequency, and conversely, the farther the index distance, the shorter the display time and the lower the frequency, and / or, determining the display order of linkage prompt effects on different levels according to the index distance from near to far, and / or, determining the color depth / transparency of the display of linkage prompt effects on different levels according to the index distance from near to far.

[0145] The above-mentioned changes can be pre-set in the instruction file, thereby increasing the accuracy of the linkage prompt information presented to the user based on the changes added to the linkage prompt effect, so that the user can more intuitively and clearly understand the linkage relationship between various form items on the web page.

[0146] As the above Figure 1 , Figure 3 The embodiment of the present disclosure provides a form item linkage prompt device. The device embodiment corresponds to the aforementioned method embodiment. For ease of reading, the device embodiment will not repeat the details of the aforementioned method embodiment one by one, but it should be clear that the device in this embodiment can correspond to all the contents of the aforementioned method embodiment. The device is used to efficiently and accurately display linkage prompt information, specifically as Figure 4 As shown, the device comprises:

[0147] The acquisition unit 31 is used to acquire the linkage instruction corresponding to the linkage event when a linkage event is triggered at the position of the target element in the webpage, wherein the instruction file corresponding to the linkage instruction stores at least: the forward dependency relationship between the target element and at least one form item that is forward dependent on it, and the linkage prompt effect represented by the forward dependency relationship;

[0148] A determining unit 32, configured to determine a form item having the forward dependency relationship with the target element based on executing the linkage instruction;

[0149] The display unit 33 is used to display the linkage prompt effect at the position corresponding to the form item in the webpage.

[0150] Further, such as Figure 5 As shown, if the forward dependency relationship includes multiple dependency levels, the determining unit 32 includes:

[0151] A first determining module 321 is used to determine a first preceding form item of the forward dependency corresponding to the target element by traversing the forward dependency relationship;

[0152] A marking module 322, configured to mark the first front-end form item as a first-level form item;

[0153] The first determining module 321 is further configured to determine, by traversing the forward dependency relationship, a second preceding form item to which the first preceding form item corresponds to a forward dependency;

[0154] The marking module 322 is further used to mark the second front form item as a second-level form item;

[0155] The execution module 323 is used to iteratively execute the forward dependency relationship traversal operation until it is determined that the dependent preceding form item does not exist.

[0156] Further, such as Figure 5 As shown, the display unit 33 includes:

[0157] A second determination module 331 is used to determine the location of one or more levels of form items that have the forward dependency relationship with the target element in the web page;

[0158] The display module 332 is used to display the corresponding linkage prompt effect at the location of each level form item.

[0159] Further, such as Figure 5 As shown, the display module 332 is specifically used for:

[0160] When monitoring that a cursor is placed on any one of the target form items among the form items that have the forward dependency relationship with the target element, determining a target form item level to which a target preceding form item corresponding to the target form item belongs, and / or one or more target dependent level form items corresponding to the target form item, wherein the target dependent level form items have a forward dependency relationship with the target form item;

[0161] At the location of the target front form item, the linkage prompt effect corresponding to the target form item level is displayed, and / or, at the location of each target dependent level form item, the linkage prompt effect corresponding to each target dependent level form item is displayed.

[0162] Further, such as Figure 5As shown, the linkage instruction is optimized, and the device further includes:

[0163] An adding unit 34, configured to add a first identifier to the target element;

[0164] The adding unit 34 is further used to add a second identifier to at least one of the form items;

[0165] An establishing unit 35, configured to establish a second forward dependency relationship between the first identifier and the second identifier based on a first forward dependency relationship between the target element and at least one form item that is forward dependent on the target element;

[0166] The establishing unit 35 is further configured to establish an association between the linkage prompt effect represented by the first forward dependency and the second forward dependency according to an equivalent relationship between the first forward dependency and the second forward dependency;

[0167] The storage unit 36 ​​is used to store the association relationship between the second forward dependency relationship and the linkage prompt effect in the instruction file.

[0168] Further, such as Figure 5 As shown, the first forward dependency relationship includes multiple dependency levels, and the establishing unit 35 includes:

[0169] A traversal module 351 is used to use the target element as a path starting point and perform a traversal operation on the form items according to the first forward dependency relationship between the target element and the form item;

[0170] Establishing module 352, used for establishing a tree structure composed of the target element and the form item as nodes according to the order of traversing the form items during the process of performing the form item traversal operation;

[0171] The establishing module 352 is further configured to establish a second forward dependency relationship between the first identifier and the second identifier according to the tree structure.

[0172] Further, such as Figure 5 As shown, the second identifier is the index identifier corresponding to the form item as a DOM element in the webpage, then before displaying the linkage prompt effect, the determining unit 32 is further specifically used to:

[0173] Obtaining a DOM structure corresponding to the webpage by parsing the HTML elements contained in the webpage;

[0174] According to the second identifier corresponding to the form item, determining the position of the form item in the DOM structure by traversing the DOM structure;

[0175] The position of the form item in the webpage is determined according to the position of the form item in the DOM structure.

[0176] The form item linkage prompt device includes a processor and a memory. The above-mentioned acquisition unit, determination unit and display unit are all stored in the memory as program units, and the processor executes the above-mentioned program units stored in the memory to realize corresponding functions.

[0177] The processor includes a kernel, and the kernel retrieves the corresponding program unit from the memory. One or more kernels can be set, and when the linkage event on the triggering target element is monitored by adjusting the kernel parameters, the linkage instruction is executed to display the linkage prompt effect at the position of each form item that the target element is forward dependent on, which can achieve efficient and accurate representation of the linkage prompt information, and facilitate users to intuitively and quickly understand the linkage prompt relationship between each form item, so that the present application provides a more optimized form item linkage prompt solution.

[0178] The embodiment of the present disclosure further provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the above form item linkage prompt method is implemented.

[0179] The present disclosure also provides an electronic device, such as Figure 6 As shown, the device includes at least one processor 41, and at least one memory 42 and a bus 43 connected to the processor 41; wherein the processor 41 and the memory 42 communicate with each other through the bus 43; the processor 41 is used to call the program instructions in the memory 42 to execute the above-mentioned form item linkage prompt method.

[0180] The embodiment of the present disclosure also provides a computer program product, which, when executed on a data processing device, is suitable for executing a program for initializing the steps of the above form item linkage prompt method.

[0181] The present disclosure is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present disclosure. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0182] In a typical configuration, the device includes one or more processors (CPU), memory and bus. The device may also include input / output interface, network interface and the like.

[0183] The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM, and the memory includes at least one memory chip. The memory is an example of a computer-readable medium.

[0184] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. 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 technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.

[0185] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

[0186] It will be appreciated by those skilled in the art that the embodiments of the present disclosure may be provided as methods, systems or computer program products. Therefore, the present disclosure may take the form of a complete hardware embodiment, a complete software embodiment or an embodiment combining software and hardware. Moreover, the present disclosure may 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.

[0187] The above are only embodiments of the present disclosure and are not intended to limit the present disclosure. For those skilled in the art, the present disclosure may have various modifications and variations. Any modification, equivalent substitution, improvement, etc. made within the spirit and principle of the present disclosure shall be included in the scope of the claims of the present disclosure.

Claims

1. A form item linkage prompt method, characterized in that: The method comprises: When a linkage event is triggered at the position of a target element in a webpage, a linkage instruction corresponding to the linkage event is obtained, wherein the instruction file corresponding to the linkage instruction stores at least: a forward dependency relationship between the target element and at least one form item that is forward dependent on it, and a linkage prompt effect represented by the forward dependency relationship; Based on executing the linkage instruction, determining the form item having the forward dependency relationship with the target element; The linkage prompt effect is displayed at a position corresponding to the form item in the webpage.

2. The method according to claim 1, characterized in that If the forward dependency relationship includes multiple dependency levels, then determining the form item having the forward dependency relationship with the target element based on executing the linkage instruction includes: By traversing the forward dependency relationship, determining a first preceding form item of the forward dependency corresponding to the target element; Marking the first front-end form item as a first-level form item; By traversing the forward dependency relationship, determining a second preceding form item to which the first preceding form item corresponds to a forward dependency; Marking the second front-end form item as a second-level form item; The forward dependency relationship operation is iteratively performed until it is determined that there is no dependent predecessor form item.

3. The method according to claim 2, characterized in that The step of displaying the linkage prompt effect at the position corresponding to the form item in the webpage includes: Determine the location of one or more levels of form items that have the forward dependency relationship with the target element in the web page; At the location of each level of form items, the corresponding linkage prompt effects are displayed.

4. The method according to claim 3, characterized in that The corresponding linkage prompt effects are displayed at the locations of the form items at each level, including: When monitoring that a cursor is placed on any one of the target form items among the form items that have the forward dependency relationship with the target element, determining a target form item level to which a target preceding form item corresponding to the target form item belongs, and / or one or more target dependent level form items corresponding to the target form item, wherein the target dependent level form items have a forward dependency relationship with the target form item; At the location of the target front form item, the linkage prompt effect corresponding to the target form item level is displayed, and / or, at the location of each target dependent level form item, the linkage prompt effect corresponding to each target dependent level form item is displayed.

5. The method according to any one of claims 1 to 4, characterized in that The processing of the linkage instruction includes: Adding a first identifier to the target element; Adding a second identifier to at least one of the form items; Based on a first forward dependency relationship between the target element and at least one form item that is forward dependent on the target element, establish a second forward dependency relationship between the first identifier and the second identifier; According to the equivalent relationship between the first forward dependency relationship and the second forward dependency relationship, the linkage prompt effect represented by the first forward dependency relationship is associated with the second forward dependency relationship; The association relationship between the second forward dependency relationship and the linkage prompt effect is stored in the instruction file.

6. The method according to claim 5, characterized in that If the first forward dependency relationship includes multiple dependency levels, then establishing a second forward dependency relationship between the first identifier and the second identifier includes: Taking the target element as the path starting point, and performing a traversal operation on the form items according to the first forward dependency relationship between the target element and the form item; In the process of performing the form item traversal operation, a tree structure consisting of the target element and the form item as nodes is established according to the order of traversing the form items; A second forward dependency relationship between the first identifier and the second identifier is established according to the tree structure.

7. The method according to claim 6, characterized in that The second identifier is an index identifier corresponding to the form item as a DOM element in the webpage, and before displaying the linkage prompt effect, determining the position of the form item in the webpage includes: Obtaining a DOM structure corresponding to the webpage by parsing the HTML elements contained in the webpage; According to the second identifier corresponding to the form item, determining the position of the form item in the DOM structure by traversing the DOM structure; The position of the form item in the webpage is determined according to the position of the form item in the DOM structure.

8. A form item linkage prompt device, characterized in that: The device comprises: An acquisition unit is used to acquire a linkage instruction corresponding to the linkage event when a linkage event is triggered at a target element position in a webpage, wherein the instruction file corresponding to the linkage instruction stores at least: a forward dependency relationship between the target element and at least one form item that is forward dependent on it, and a linkage prompt effect represented by the forward dependency relationship; A determination unit, configured to determine, based on executing the linkage instruction, a form item having the forward dependency relationship with the target element; The display unit is used to display the linkage prompt effect at the position corresponding to the form item in the webpage.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the form item linkage prompt method according to any one of claims 1 to 7 is implemented.

10. An electronic device, characterized in that: The device includes at least one processor, and at least one memory and a bus connected to the processor; Wherein, the processor and the memory communicate with each other through the bus; The processor is used to call the program instructions in the memory to execute the form item linkage prompt method according to any one of claims 1 to 7.

Images