Form field identifier display method, program product, electronic equipment and storage medium

Abstract

The invention provides a form field identifier display method, a program product, electronic equipment and a storage medium, the method comprises the following steps: monitoring a form page through a field display component, after monitoring a field viewing operation of a user on the form page, traversing page elements of the form page, and determining form items of the form page; the form item comprises an input node and a label node; respectively matching the input node with the plurality of label nodes, and if the matching is successful, acquiring a field identifier of the input node according to a node attribute of the input node; creating node elements corresponding to the input nodes based on the input nodes; the node element is used for displaying a field identifier of the input node in the form page; and filling the field identifier into the node element, and displaying the field identifier of the input node by using the node element. A user can quickly display the field identifier of the form item through simple operation, and the efficiency of interaction between the user and the form is improved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a form field identification display method, a program product, an electronic device and a storage medium. Background Art

[0002] Forms are a common feature for users to interact with websites or applications, allowing users to enter and submit data. At various stages of form use, such as receiving data filled in by users, transmitting data, or when developers are debugging form functions, it is necessary to identify the field identifier corresponding to each input field to ensure that the data is submitted and processed correctly. The current way to correspond input nodes and field identifiers in forms requires developers to check the code. It is inefficient to find or extract the corresponding relationship from the code. Summary of the invention

[0003] The purpose of the embodiments of the present application is to provide a form field identification display method, program product, electronic device and storage medium, which are used to improve the problem of low processing efficiency when manually looking up codes to determine the field identification of input nodes.

[0004] In a first aspect, an embodiment of the present application provides a method for displaying form field identifiers, comprising: monitoring a form page through a field display component, and after monitoring a user's field viewing operation on the form page, traversing the page elements of the form page to determine the form items of the form page; the form items include input nodes and label nodes; matching the input nodes with multiple label nodes respectively, and if the match is successful, obtaining the field identifier of the input node according to the node attribute of the input node; creating a node element corresponding to the input node based on the input node; the node element is used to display the field identifier of the input node in the form page; filling the field identifier into the node element, and using the node element to display the field identifier of the input node.

[0005] In the above implementation process, the field display component monitors the user's operation on the form page. By traversing the page elements of the form page, both static and dynamically generated page elements can be identified and the node identifiers can be determined. Create node elements corresponding to the input nodes, and directly display the identifier of each input field on the form page, so that developers or testers can intuitively see the name of each field, improving efficiency and user experience. Users can quickly display the field identifiers of form items through simple operations, which improves the efficiency of user interaction with the form.

[0006] Optionally, in an embodiment of the present application, before monitoring the form page through the field display component, the method also includes: installing the field display component in the client corresponding to the form page; after the form page is loaded, executing the logic file in the field display component, and generating an operation button in the control panel of the field display component; binding an event listener to the operation button; the event listener is used to capture the click event of the operation button; the operation button includes a field view button; the field view button is used to trigger a field view operation on the form page.

[0007] In the above implementation process, by installing the field display component, users can directly use the function of the field display component when browsing the form page without additional operations or tools, providing users with an intuitive operation interface. Users can perform specific functions by clicking buttons, such as viewing form field labels, which improves the convenience of viewing field labels.

[0008] Optionally, in an embodiment of the present application, the input node is matched with multiple label nodes respectively. If the match is successful, the field identifier of the input node is obtained according to the node attributes of the input node, including: obtaining multiple label nodes in the form page; traversing multiple label nodes to obtain the label attributes of each label node, and storing the label attributes of the multiple label nodes as key values ​​in an array respectively; matching the node attributes of the input node with the label attributes of the multiple label nodes in the array respectively. If the node attributes match the label attributes of the label node in the array, it is determined that the match is successful, and the node attributes of the input node are used as the field identifier of the input node.

[0009] In the above implementation process, by collecting the label attributes of all label nodes, a matching attribute list can be established to provide a basis for identifying the corresponding label of each input field. Storing the label attributes in an array makes the subsequent matching process more efficient, and the matching relationship can be determined directly by searching the array. The matching method improves the correct association between the form field identification and the corresponding label, reducing human errors; and clear field identification helps maintain and update the form code.

[0010] Optionally, in an embodiment of the present application, after monitoring the user's field viewing operation on the form page, the method also includes: checking whether the form page contains a historical node element that has been created, and if so, clearing the historical node element; if there is no historical node element, executing: the step of traversing the page elements of the form page.

[0011] In the above implementation process, clearing the history node elements can keep the form page tidy and improve the updating and accuracy of the user interface; performing traversal and display operations without history node elements can improve efficiency, reduce the interference of history node elements, and reduce the complexity of the code.

[0012] Optionally, in an embodiment of the present application, the operation button also includes a clear button, which is used to trigger a clear operation on the historical field identifiers that have been displayed in the form page; after monitoring the form page through the field display component, the method also includes: after monitoring that the clear button is triggered, after clearing the field identifiers that have been displayed in the form page, traversing the form page by calling a function, searching for the historical field identifiers that have been displayed, clearing the historical field identifiers that have been displayed, and removing the node elements used to display the historical field identifiers.

[0013] In the above implementation process, the displayed historical field identifiers and the node elements used to display the historical field identifiers are cleared, presenting the user with a clean, updated page view. The user can control when to display and hide the field identifiers, which improves the flexibility of the plugin and the user's sense of control. The page remains tidy after the clearing operation, with no remaining field identifiers or node elements, improving the aesthetics and professionalism of the page.

[0014] Optionally, in an embodiment of the present application, after monitoring the user's field viewing operation on the form page, traversing the page elements of the form page, including: determining the button identifier of the operation button clicked by the user through an event listener; if the button identifier is the identifier corresponding to the field viewing button, it is determined that the user's field viewing operation on the form page is monitored, and traversing the page elements of the form page.

[0015] In the above implementation process, users can quickly view the identifiers of all form fields through simple clicks, reducing manual search time in development and testing, and automatically matching and displaying field identifiers reduces the possibility of human errors.

[0016] Optionally, in an embodiment of the present application, the method further includes: using a preset interface to monitor changes in page elements in the form page, and after determining that the form page has been loaded, dynamically displaying field identifiers based on changes in the page elements.

[0017] In the above implementation process, the field display component can respond to changes on the page in real time to dynamically display the field identifier. The display of the field identifier is synchronized with the actual state of the page element, providing real-time feedback. Attempts to access or modify the element when the page element is fully loaded reduce possible errors and exceptions, and improve the stability and reliability of the code.

[0018] In the second aspect, the embodiment of the present application also provides a form field identification display device, including: a form item traversal module, which is used to monitor the form page through a field display component, and after monitoring the user's field viewing operation on the form page, traverse the page elements of the form page to determine the form items of the form page; the form items include input nodes and label nodes; a matching module, which is used to match the input node with multiple label nodes respectively, and if the match is successful, obtain the field identification of the input node according to the node attribute of the input node; a node creation module, which is used to create a node element corresponding to the input node based on the input node; the node element is used to display the field identification of the input node in the form page; and a fill-in identification module, which is used to fill the field identification into the node element, and use the node element to display the field identification of the input node.

[0019] In a third aspect, an embodiment of the present application further provides a computer program product, including computer program instructions, which, when executed by a processor, execute the method provided by the first aspect or any one of the implementations of the first aspect.

[0020] In a fourth aspect, an embodiment of the present application further provides an electronic device, comprising: a processor and a memory, the memory storing computer program instructions, and the computer program instructions, when executed by the processor, execute the method provided by the first aspect or any one of the implementations of the first aspect.

[0021] In a fifth aspect, an embodiment of the present application further provides a computer-readable storage medium, on which computer program instructions are stored. When the computer program instructions are executed by a processor, the method provided by the first aspect or any one of the implementations of the first aspect is executed.

[0022] A form field identification display method, program product, electronic device and storage medium provided by the present application are adopted, and the user's operation on the form page is monitored through the field display component. By traversing the page elements of the form page, both static and dynamically generated page elements can be identified and the node identification can be determined. Create a node element corresponding to the input node, and directly display the identification of each input field on the form page, so that developers or testers can intuitively see the name of each field, improve efficiency and user experience. Users can quickly display the field identification of form items through simple operations, which improves the efficiency of user interaction with the form. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the embodiments of the present application will be briefly introduced below. It should be understood that the following drawings only show certain embodiments of the present application and therefore should not be regarded as limiting the scope. For ordinary technicians in this field, other related drawings can be obtained based on these drawings without paying creative work.

[0024] Figure 1 A schematic diagram of a form provided in an embodiment of the present application;

[0025] Figure 2 A flowchart of a form field identification display method provided in an embodiment of the present application;

[0026] Figure 3 A schematic diagram of the structure of a form field identification display device provided in an embodiment of the present application;

[0027] Figure 4 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0028] The following embodiments of the technical solution of the present application are described in detail in conjunction with the accompanying drawings. The following embodiments are only used to more clearly illustrate the technical solution of the present application, and are therefore only used as examples, and cannot be used to limit the scope of protection of the present application.

[0029] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by technicians in the technical field to which this application belongs; the terms used herein are only for the purpose of describing specific embodiments and are not intended to limit this application.

[0030] In the description of the embodiments of the present application, the technical terms "first", "second", etc. are only used to distinguish different objects, and cannot be understood as indicating or implying relative importance or implicitly indicating the number, specific order or primary and secondary relationship of the indicated technical features. In the description of the embodiments of the present application, the meaning of "multiple" is two or more, unless otherwise clearly and specifically defined.

[0031] See also Figure 1 A schematic diagram of a form provided in an embodiment of the present application is shown;

[0032] Forms are a common feature for users to interact with websites or applications. Forms can be used to quickly fill in and edit data visually. For example, on a common login page, enter the user account, password, and then click Login. Figure 1 It can be a type of form page. Of course, more complex form pages are also common in actual applications. For example, a page that collects user information has a complex form page that requires filling in name, gender, ID card, place of residence, household registration, and other related information.

[0033] Front-end developers will create page form items by using, for example, Form components. After the user fills in the relevant form content, the data in the form is obtained and passed to the server personnel in the data format agreed upon by the server personnel. The form content filled in by the user is submitted.

[0034] In the process of transmitting data, the user name uses the username field to transmit information, and the ID card uses the IDCard field to transmit information. Each input information will have a corresponding field for data transmission. When facing a complex form page, there are usually dozens or even hundreds of fields transmitted at a time. In this process, since the input data corresponds to the field one by one, the developer needs to ensure that each field and form item (user input data) correspond one by one. Only in this way can the data be transmitted correctly and a normal function be completed. In the development process, developers often write code in the code according to the fields given in the document one by one. However, when the function is deployed in the test environment or production environment, if you need to quickly view the correspondence between the field and the form item, it is difficult for the tester or developer to find it quickly without code comparison.

[0035] Please continue to see Figure 1 , the corresponding relationship between the field and the form is: the field corresponding to the account is marked as "username"; the field corresponding to the password is "password". For example: the account and the content of the input box behind it are the content entered by the user, and username is the field. The user enters 12345, and the data passed is username:12345, and the same is true for other input content.

[0036] The embodiment of the present application provides a method for displaying form field identifiers, which monitors user operations on a form page through a field display component, and traverses the page elements of the form page, so that both static and dynamically generated page elements can be identified and node identifiers can be determined. Create node elements corresponding to input nodes, and directly display the identifier of each input field on the form page, so that developers or testers can intuitively see the name of each field, improving efficiency and user experience. Users can quickly display the field identifiers of form items through simple operations, which improves the efficiency of user interaction with the form.

[0037] See also Figure 2 A flow chart of a form field identification display method provided by an embodiment of the present application is shown. The form field identification display method provided by an embodiment of the present application can be applied to an electronic device, which may include a physical device such as a server, a PC, a tablet computer, or a smart phone, or a virtual device such as a virtual machine or a container. The electronic device may be a single device, or a combination of multiple devices or a cluster of a large number of devices. The form field identification display method may include:

[0038] Step S110: monitor the form page through the field display component, and after monitoring the user's field viewing operation on the form page, traverse the page elements of the form page to determine the form items of the form page; the form items include input nodes and label nodes.

[0039] Step S120: Match the input node with a plurality of label nodes respectively. If the matching is successful, obtain the field identifier of the input node according to the node attribute of the input node.

[0040] Step S130: creating a node element corresponding to the input node based on the input node; the node element is used to display the field identifier of the input node in the form page.

[0041] Step S140: Fill the field identifier into the node element, and use the node element to display the field identifier of the input node.

[0042] In step S110, the field display component may be a component used to increase or expand its functions. For example, it may be an extension or plug-in developed based on the Chrome browser, or an extension or plug-in system corresponding to the application platform. The form page may be a web page containing a form in the browser, or a page containing a form in the application.

[0043] The field display component can be pre-installed in the client corresponding to the form page. After installing the plug-in, the user needs to open a web page so that the plug-in can run on the web page and perform its functions. The plug-in panel is a user interface provided by the plug-in for users to interact with the plug-in through this interface. After the plug-in is installed and activated, the plug-in panel should display one or more buttons, such as a field view button and a clear button. These buttons are part of the plug-in panel, and users can trigger the plug-in's functions by clicking these buttons.

[0044] When the user clicks the field view button on the plug-in panel, this button is bound to an event listener, which captures the click event of the operation button. When the time listener bound to the field view button is triggered, the plug-in's display field identification function will be started.

[0045] After monitoring the user's field viewing operation on the form page, a preset JavaScript function, such as eventFuncs, will be called. This function can be used to handle event requests from the plug-in panel.

[0046] The page elements of the form page are traversed through the function to determine the form items of the form page. Here, "form items" can refer to <label>Nodes and corresponding <input> A pair of elements consisting of a node. Among them, form elements refer to the HTML tags that make up the form, which allow users to enter data in the form. Input nodes can be <input> Node, and the label node can be <label>As an implementation method, DOM APIs such as document.getElementsByTagName and document.getElementsByClassName can be used to obtain page elements on the form page.

[0047] In step S220, a keys array may be used to store the tag attributes of each tag node in the above page element, the tag attributes including ID representation or name attribute. For example, all tag elements on the page are traversed through a function, and their ID representation or name attribute is stored in the keys array.

[0048] The node attribute of the input node is matched with the label attributes of multiple label nodes in the array. If the node attribute matches the label attribute of the label node in the array, it is determined that the match is successful, and the node attribute of the input node is used as the field identifier of the input node. A successful match means that the form item of the input node is found.

[0049] In step S130, for each form item (or input node), the showFormId function can create a new node, called a node element. That is, for each pair of label nodes and input nodes, a new node can be created. Of course, since input nodes and label nodes are one-to-one corresponding, it can also be called creating a node element corresponding to the input node based on the input node. The node element can be a Elements, node elements will be used to display <input> The field identifier associated with the element. The field identifier can be a name attribute or an id attribute.

[0050] It is understandable that in step S130, it is not necessary to perform a separate <label>or <input> To build a node, for each pair <label>and <input> Create a node element. Because a <label>Usually corresponds to a <input> , which together constitute a form item.

[0051] In step S140, the field identifier is filled into the node element, and the field identifier of the input node is displayed using the node element. For each input node, the field identifier can be obtained through its name attribute or id attribute. After determining the field identifier of the input node, we add this field identifier (such as ID) to the corresponding node element. In this way, when users view the form page, they can directly see the field identifier next to each input node.

[0052] In the implementation process of the above embodiment: the user's operation on the form page is monitored by the field display component, and the page elements of the form page are traversed, and both static and dynamically generated page elements can be identified and the node identification can be determined. Create a node element corresponding to the input node, and directly display the identification of each input field on the form page, so that developers or testers can intuitively see the name of each field, improve efficiency and user experience. Users can quickly display the field identification of form items through simple operations, which improves the efficiency of user interaction with the form.

[0053] Optionally, in the embodiment of the present application, before monitoring the form page through the field display component, the method further includes:

[0054] Install the field display component in the client corresponding to the form page. For example, install the field display component (which may be a browser plug-in or a web script) into the user's browser. If it is a browser plug-in, the user can visit the browser's extension store, search for the plug-in, and then install it. If it is a web script, the website administrator or developer will embed it into the form page.

[0055] Taking the Chrome browser as an example, users can install plug-ins through the Chrome extension page or by directly dragging the plug-in file into the browser. After installing the plug-in, the user needs to open a web page so that the plug-in can run on the web page and perform its functions.

[0056] The plug-in needs to wait until the form page is fully built (loaded) to perform its functions correctly, such as displaying field labels next to the form. If the DOM is not fully built, the plug-in may not be able to find the correct elements, or the operations performed may not work as expected. Therefore, the plug-in needs to know when the web page is fully loaded so that it can perform its functions at the right time. This can be achieved by listening to the document.onreadystatechange event, which is triggered when the document loading state changes.

[0057] After the form page is loaded, the logic file in the field display component is executed. The field display component contains a logic file (such as a JavaScript file). When the form page is loaded, this logic file will be executed. This can be done by <script>标签中设置window.onload事件或者使用DOMContentLoaded事件来实现。

[0058] 在字段展示组件的控制面板中生成操作按钮；操作按钮绑定事件监听器；事件监听器用于捕捉操作按钮的点击事件；操作按钮包括字段查看按钮；字段查看按钮用于触发对表单页面进行字段查看操作。

[0059] 逻辑文件执行后，会在字段展示组件的用户界面(例如可以是一个弹出窗口或工具栏)中生成操作按钮。操作按钮可以是通过JavaScript动态创建的DOM元素。

[0060] 在上述实施例的实现过程中：通过安装字段展示组件，用户可以在浏览表单页面时直接使用该字段展示组件的功能，无需额外的操作或工具，为用户提供了一个直观的操作界面，用户可以通过点击按钮来执行特定的功能，如查看表单字段标识，提高了查看字段标识的便捷性。

[0061] 可选的，在本申请实施例中，将输入节点分别与多个标签节点进行匹配，若匹配成功，则根据输入节点的节点属性获取输入节点的字段标识，包括：

[0062] 获取表单页面中的多个标签节点，例如使用JavaScript中的document.querySelectorAll('label')方法来获取页面上所有的标签节点(<label>节点)。这个方法返回一个包含所有匹配节点的NodeList集合。

[0063] 通过遍历多个标签节点，获得每一标签节点的标签属性，将多个标签节点的标签属性分别作为键值存储在数组中，例如遍历上述步骤中获取的所有标签节点，对于每个元素，检查并获取其标签属性，标签属性包括for属性值。这个属性值用于与输入节点的节点属性匹配。

[0064] 创建一个数组，将上述收集到的每一标签节点的标签属性添加到这个数组中。数组中的每个元素都是一个可能与输入节点匹配的键值。

[0065] 将输入节点的节点属性分别与数组中的多个标签节点的标签属性进行匹配，若节点属性与数组中标签节点的标签属性相匹配，则确定匹配成功，将输入节点的节点属性作为输入节点的字段标识。

[0066] 如果标签节点通过for属性与标签节点的节点属性(例如id属性)关联，或者标签节点直接包裹标签节点，可以认为它们是相匹配的，确定匹配成功。如果输入节点的id属性值在数组中找到了匹配的for属性值，那么认为这个输入节点与对应的<label>节点匹配成功。匹配成功意味着可以准确地识别出输入节点的字段标识。使用输入节点的节点属性(id属性值或name属性值)作为字段标识，并在用户界面中展示这个字段标识。

[0067] 在上述实施例的实现过程中：通过收集所有标签节点的标签属性，可以建立一个用于匹配的属性列表，为识别每个输入字段的对应标签提供依据。将标签属性存储在数组中，使得后续的匹配过程更加高效，可以直接通过查找数组来确定匹配关系。通过匹配的方式提高表单字段的标识与对应的标签正确关联性，减少了人为错误；并且清晰的字段标识有助于维护和更新表单代码。

[0068] 可选的，在本申请实施例中，在监听到用户对表单页面的字段查看操作之后，方法还包括：

[0069] 检查表单页面是否包含已经创建的历史节点元素，若有历史节点元素，则将历史节点元素清除；若无历史节点元素，则执行：遍历表单页面的页面元素的步骤。

[0070] 在遍历表单页面的页面元素之前，首先需要检查页面上是否已经存在，之前通过showFormId创建的用于显示字段标识的历史节点元素。如果有，可以先清除这些历史节点元素，以避免重复展示。可以通过查询特定的类名、ID或其他标识符来实现，例如使用document.querySelectorAll('.some-class')来查找所有具有特定类的元素。检查表单页面是否包含已经创建的历史节点元素，可以使插件或组件不会针对同一输入节点重复添加相同的字段标识，从而减少页面上的混乱和不一致。

[0071] 如果表单页面发现了历史节点元素，那么需要将这些历史节点元素从DOM中移除。例如可以通过遍历这些元素并调用.remove()方法或.parentNode.removeChild()方法来实现。清除历史节点元素可以保持表单页面的整洁，提高用户界面的更新和准确性，降低旧信息对用户造成干扰。

[0072] 如果没有发现历史节点元素，那么可以直接进入下一步，即遍历表单页面的页面元素，例如<input>和<label>节点，以确定表单项，并准备显示输入节点的字段标识。

[0073] 在上述实施例的实现过程中：清除历史节点元素可以保持表单页面的整洁，提高用户界面的更新和准确性；在没有历史节点元素的情况下执行遍历和显示操作，这样可以提高效率，减少历史节点元素的干扰，也减少了代码的复杂性。

[0074] 上述清除历史节点元素的方式，是在监听到用户对表单页面的字段查看操作之后自动进行检查并在有历史节点元素的情况下自动触发清除操作，在清除操作之后，会执行：遍历表单页面的页面元素的步骤，直到显示新的字段标识，目的是不会重复显示字段标识。

[0075] 下面提供一种用户自主选择清除历史节点元素的方法，旨在提高用户体验，可以由用户根据需求选择是否展示字段标识，实现即使不显示新的字段标识，也可以选择清除已经显示的字段标识，保持原始的表单页面。

[0076] 可选的，在本申请实施例中，操作按钮还包括清除按钮，清除按钮用于触发对表单页面中已经展示的历史字段标识进行清除操作；在通过字段展示组件监听表单页面之后，方法还包括：

[0077] 在监听到清除按钮被触发后，对表单页面中已经显示的字段标识进行清除操作之后，通过调用函数遍历表单页面，查找已经展示的历史字段标识，对已经展示的历史字段标识进行清除，以及移除用于展示历史字段标识的节点元素。

[0078] 在字段展示组件中，为清除按钮设置一个事件监听器，监听用户的点击事件。当用户点击清除按钮时，事件监听器会捕捉到这个事件，并触发执行清除操作的函数。

[0079] 在清除函数中，首先标记所有已经显示的字段标识，这些标识可以通过文本形式直接添加到表单页面上，或者是以节点元素的形式存在。调用一个函数来遍历表单页面，查找所有已经展示的历史字段标识。这个函数会检查页面上的所有元素，包括可能包含字段标识的元素。

[0080] 在遍历过程中，可以使用特定的选择器或标识符来查找已经展示的历史字段标识。例如，如果字段标识被添加到的节点元素(例如元素)中，可以使用document.querySelectorAll('.some-class')来查找这些节点元素。

[0081] 对于找到的每个历史字段标识，将其内容清除。如果字段标识是文本，可以将其textContent设置为空；如果字段标识是节点元素，可以调用clearAllNode函数将其从DOM中移除。在清除字段标识后，对于用于展示这些标识的节点元素，也进行移除操作，例如也可以通过调用clearAllNode函数来实现的。

[0082] 在上述实施例的实现过程中：清除已经展示的历史字段标识以及用于展示历史字段标识的节点元素，为用户展示了一个干净、更新后的页面视图。用户可以控制何时显示和隐藏字段标识，提高了插件的灵活性和用户的控制感。页面在清除操作后保持整洁，没有遗留的字段标识或节点元素，提升了页面的美观和专业性。

[0083] 可选的，在本申请实施例中，在监听到用户对表单页面的字段查看操作之后，遍历表单页面的页面元素，包括：

[0084] 通过事件监听器确定用户所点击的操作按钮的按钮标识；若按钮标识为字段查看按钮对应的标识，则确定监听到用户对表单页面的字段查看操作，遍历表单页面的页面元素。

[0085] 为字段展示组件中的所有操作按钮(如字段查看按钮和清除按钮)添加事件监听器。当用户点击任何一个操作按钮时，事件监听器会触发一个函数，该函数可以访问事件对象的target属性，从而确定被点击的按钮。

[0086] 在事件监听器触发的函数中，检查被点击按钮的按钮标识(可以是按钮的id、class或data-*属性)。如果这个标识与字段查看按钮的标识相匹配，那么函数就知道用户想要查看表单字段的标识。确认用户请求查看字段标识，插件会执行一个函数来遍历表单页面的所有相关元素。

[0087] 如果被点击按钮的按钮标识与清除按钮的标识相匹配，代表用户所选择的功能为清除历史节点元素的功能，则调用该清除功能对应的函数进行清除操作。

[0088] 在上述实施例的实现过程中：用户可以通过简单的点击操作快速查看所有表单字段的标识，减少了开发和测试中的手动查找时间，以及自动匹配和显示字段标识减少了人为错误的可能性。

[0089] 可选的，在本申请实施例中，方法还包括：利用预设接口监听表单页面中页面元素的变化情况，在确定表单页面加载完成之后，基于页面元素的变化情况动态显示字段标识。

[0090] 例如可以使用JavaScript的MutationObserver接口来监听表单页面中页面元素的变化情况。MutationObserver可以监听DOM树的修改、属性的变化等。可以创建一个MutationObserver实例，并提供一个回调函数，该回调函数会在观察到变化时执行。

[0091] 对于表单页面中的每一次变化情况，都需要在确定表单页面加载完成之后，才能继续根据变化之后的情况显示字段标识。例如当前的变化情况是表单页面中添加了三个标签节点以及对应的输入节点，如果需要显示字段标识，那么需要在当前变化对应的表单页面加载完成之后，将添加的三个输入节点对应的字段标识进行显示。否则，可能会出现在变化之后，只显示一个或两个输入节点的字段标识的情况。在一个可选地实施例中，可以通过监听window.onload事件或DOMContentLoaded事件来确定DOM已经完全加载。

[0092] 在确定表单页面加载完成之后，基于页面元素的变化情况动态显示字段标识，例如在MutationObserver的回调函数中，检查变化的类型和内容。如果变化涉及到表单元素的添加或修改，那么执行显示字段标识的逻辑。可以查找对应的标签节点和输入节点元素，创建新的节点元素来显示字段标识，并将其插入到页面中适当的位置，实现基于页面元素的变化情况动态显示字段标识。

[0093] 在上述实施例的实现过程中：字段展示组件可以即时响应页面上的变化实现动态显示字段标识，字段标识的显示与页面元素的实际状态保持同步，提供了实时的反馈。在页面元素完全加载时尝试访问或修改元素，从而减少了可能的错误和异常，提高了代码的稳定性和可靠性。

[0094] 请参见图3示出的本申请实施例提供的表单字段标识展示装置的结构示意图；本申请实施例提供了一种表单字段标识展示装置200，包括：

[0095] 遍历表单项模块210，用于通过字段展示组件监听表单页面，在监听到用户对表单页面的字段查看操作之后，遍历表单页面的页面元素，确定表单页面的表单项；表单项包括输入节点和标签节点；

[0096] 匹配模块220，用于将输入节点分别与多个标签节点进行匹配，若匹配成功，则根据输入节点的节点属性获取输入节点的字段标识；

[0097] 创建节点模块230，用于基于输入节点创建输入节点对应的节点元素；节点元素用于在表单页面中展示输入节点的字段标识；

[0098] 填写标识模块240，用于将字段标识填入节点元素，利用节点元素展示输入节点的字段标识。

[0099] 可选地，在本申请实施例中，表单字段标识展示装置200，还包括：安装模块，用于在表单页面对应的客户端中安装字段展示组件；在表单页面加载完成之后，执行字段展示组件中的逻辑文件，在字段展示组件的控制面板中生成操作按钮；操作按钮绑定事件监听器；事件监听器用于捕捉操作按钮的点击事件；操作按钮包括字段查看按钮；字段查看按钮用于触发对表单页面进行字段查看操作。

[0100] 可选地，在本申请实施例中，表单字段标识展示装置200，匹配模块220，具体用于获取表单页面中的多个标签节点；通过遍历多个标签节点，获得每一标签节点的标签属性，将多个标签节点的标签属性分别作为键值存储在数组中；将输入节点的节点属性分别与数组中的多个标签节点的标签属性进行匹配，若节点属性与数组中标签节点的标签属性相匹配，则确定匹配成功，将输入节点的节点属性作为输入节点的字段标识。

[0101] 可选地，在本申请实施例中，表单字段标识展示装置200，还包括：第一清除模块，用于检查表单页面是否包含已经创建的历史节点元素，若有历史节点元素，则将历史节点元素清除；若无历史节点元素，则执行：遍历表单页面的页面元素的步骤。

[0102] 可选地，在本申请实施例中，表单字段标识展示装置200，操作按钮还包括清除按钮，清除按钮用于触发对表单页面中已经展示的历史字段标识进行清除操作；还包括第二清除模块，用于在监听到清除按钮被触发后，对表单页面中已经显示的字段标识进行清除操作之后，通过调用函数遍历表单页面，查找已经展示的历史字段标识，对已经展示的历史字段标识进行清除，以及移除用于展示历史字段标识的节点元素。

[0103] 可选地，在本申请实施例中，表单字段标识展示装置200，遍历表单项模块210，具体用于通过事件监听器确定用户所点击的操作按钮的按钮标识；若按钮标识为字段查看按钮对应的标识，则确定监听到用户对表单页面的字段查看操作，遍历表单页面的页面元素。

[0104] 可选地，在本申请实施例中，表单字段标识展示装置200，还包括动态显示模块，用于利用预设接口监听表单页面中页面元素的变化情况，在确定表单页面加载完成之后，基于页面元素的变化情况动态显示字段标识。

[0105] 应理解的是，该装置与上述的表单字段标识展示方法实施例对应，能够执行上述方法实施例涉及的各个步骤，该装置具体的功能可以参见上文中的描述，为避免重复，此处适当省略详细描述。该装置包括至少一个能以软件或固件(firmware)的形式存储于存储器中或固化在装置的操作系统(operating system，OS)中的软件功能模块。

[0106] 请参见图4示出的本申请实施例提供的电子设备的结构示意图。本申请实施例提供的一种电子设备300，包括：处理器310和存储器320，存储器320存储有处理器310可执行的机器可读指令，机器可读指令被处理器310执行时执行如上的方法。

[0107] 图4中所示的各组件可以采用硬件、软件或其组合实现。电子设备300可能是实体设备，例如服务器、PC机等，也可能是虚拟设备，例如虚拟机、虚拟化容器等。并且，电子设备300也不限于单台设备，也可以是多台设备的组合或者大量设备构成的集群。

[0108] 本申请实施例还提供了一种存储介质，该存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如上的方法。

[0109] 其中，存储介质可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(Static Random Access Memory,简称SRAM)，电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory,简称EEPROM)，可擦除可编程只读存储器(Erasable Programmable Read Only Memory,简称EPROM)，可编程只读存储器(Programmable Red-Only Memory,简称PROM)，只读存储器(Read-OnlyMemory,简称ROM)，磁存储器，快闪存储器，磁盘或光盘。

[0110] 本申请实施例还提供了计算机程序产品，包括计算机程序指令，计算机程序指令被处理器运行时执行如上的方法。

[0111] 本申请实施例所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其他的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本申请实施例的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和 / 或流程图中的每个方框、以及框图和 / 或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

[0112] 另外，在本申请实施例各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

[0113] 以上的描述，仅为本申请实施例的可选实施方式，但本申请实施例的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请实施例揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请实施例的保护范围之内。< / script> < / label> < / label> < / label> < / label> < / label>

Claims

1. A form field identification display method, characterized in that: include: The form page is monitored by the field display component, and after monitoring the user's field viewing operation on the form page, the page elements of the form page are traversed to determine the form items of the form page; the form items include input nodes and label nodes; Matching the input node with the plurality of label nodes respectively, and if the matching is successful, obtaining the field identifier of the input node according to the node attribute of the input node; Creating a node element corresponding to the input node based on the input node; The node element is used to display the field identifier of the input node in the form page; The field identifier is filled into the node element, and the node element is used to display the field identifier of the input node.

2. The method according to claim 1, characterized in that Before monitoring the form page through the field display component, the method further includes: Installing the field display component in the client corresponding to the form page; After the form page is loaded, the logic file in the field display component is executed to generate an operation button in the control panel of the field display component; the operation button is bound to an event listener; the event listener is used to capture the click event of the operation button; the operation button includes a field view button; the field view button is used to trigger a field view operation on the form page.

3. The method according to claim 1, characterized in that The step of matching the input node with the plurality of label nodes respectively, and if the matching is successful, obtaining the field identifier of the input node according to the node attribute of the input node, includes: Obtaining a plurality of the tag nodes in the form page; By traversing the multiple label nodes, obtaining the label attribute of each label node, and storing the label attributes of the multiple label nodes as key values ​​in an array respectively; The node attributes of the input node are matched with the label attributes of the multiple label nodes in the array respectively. If the node attributes match the label attributes of the label nodes in the array, it is determined that the match is successful, and the node attributes of the input node are used as the field identifier of the input node.

4. The method according to claim 1, characterized in that: After monitoring the user's field viewing operation on the form page, the method further includes: Check whether the form page contains a history node element that has been created. If so, clear the history node element; if not, execute the step of traversing the page elements of the form page.

5. The method according to claim 2, characterized in that: The operation button also includes a clear button, which is used to trigger a clear operation of the historical field identifiers that have been displayed in the form page; After monitoring the form page through the field display component, the method further includes: After listening to the clear button being triggered, the field identifiers already displayed in the form page are cleared, and then the form page is traversed by calling a function to find the historical field identifiers that have been displayed, clear the historical field identifiers that have been displayed, and remove the node elements used to display the historical field identifiers.

6. The method according to claim 2, characterized in that After monitoring the user's field viewing operation on the form page, traversing the page elements of the form page includes: The button identifier of the operation button clicked by the user is determined through an event listener; if the button identifier is the identifier corresponding to the field view button, it is determined that the user's field view operation on the form page is monitored, and the page elements of the form page are traversed.

7. The method according to any one of claims 1 to 6, characterized in that: The method further includes: using a preset interface to monitor changes in page elements in the form page, and after determining that the form page has been loaded, dynamically displaying the field identifier based on the changes in the page elements.

8. A computer program product, characterized in that The method comprises computer program instructions, and when the computer program instructions are executed by a processor, the method according to any one of claims 1 to 7 is executed.

9. An electronic device, characterized in that: include: A processor and a memory, wherein the memory stores computer program instructions, and when the computer program instructions are executed by the processor, the method according to any one of claims 1 to 7 is executed.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer program instructions, and when the computer program instructions are executed by a processor, the method according to any one of claims 1 to 7 is executed.

Images