Automatic focus element focusing method and device, equipment, storage medium and program product

Abstract

The invention discloses a focus element automatic focusing method and device, equipment, a storage medium and a program product, and relates to the technical field of front-end development, and the method comprises the steps: obtaining a focusing custom function and a focusing element; triggering a focusing operation based on the focusing custom function and the focusing element to obtain a focus of the focusing element; and performing element automatic focusing based on the focusing element focus. According to the method, the focus of the focusing element is obtained by obtaining the focusing custom function and the focusing element, the focusing operation is automatically triggered by using the focusing custom instruction when the focusing element is inserted into the document object model to perform element automatic focusing, and the change of data attributes in an instance is responded; the focusing operation is executed according to the attribute value when the element is actually inserted into the document object model, secondary failure of automatic focusing is avoided, automatic focusing logic is packaged in the focusing custom instruction, high cohesion and low coupling of codes are achieved, the development efficiency and the user experience are improved, the focus is automatically obtained, and additional manual operation is not needed.

Description

Technical Field

[0001] The present application relates to the field of front-end development technology, and in particular to a method, device, equipment, storage medium and program product for automatically focusing a focus element. Background Art

[0002] In front-end development, in order to improve user experience and meet specific interaction requirements, it is usually necessary to implement the automatic focus function of focus elements such as input boxes. Automatic focus allows users to directly enter information in the specified input box without any operation after the page is loaded or redirected. In front-end development, when we use Vue.js combined with ElementUI, we often need to control the el-input input box, especially when using the v-if instruction to dynamically display the input box, the automatic focus attribute may fail when the input box is displayed for the second time. Therefore, how to write, trigger and call the focus custom function to focus the focus element more efficiently is a must.

[0003] At present, the existing practice of achieving automatic focus is to directly operate DOM through JavaScript to achieve focus. However, although the method of directly using JavaScript to operate DOM elements is flexible, in modern front-end frameworks, direct DOM operation is not elegant and efficient enough, and it is contrary to the framework's responsive system and component design principles. It is easy to destroy the data-driven and component design principles of frameworks such as Vue.js, making the code difficult to maintain and expand. Therefore, how to automatically focus the focus element efficiently and flexibly while following the framework design principles has become an urgent problem to be solved.

[0004] The above contents are only used to assist in understanding the technical solution of the present application and do not constitute an admission that the above contents are prior art. Summary of the invention

[0005] The main purpose of this application is to provide a method, device, equipment, storage medium and program product for automatic focusing of focus elements, aiming to solve the technical problem of efficient and flexible automatic focusing of focus elements while following the framework design principles.

[0006] To achieve the above object, the present application proposes a method for automatically focusing a focus element, the method comprising:

[0007] Get the focused custom function and focused element;

[0008] Triggering a focus operation based on the focus custom function and the focus element to obtain the focus of the focus element;

[0009] The element is automatically focused based on the focused element focus.

[0010] In one embodiment, the step of obtaining the focused custom function and the focused element includes:

[0011] Get the focused element feature identifier, event information, manual trigger function and event trigger function;

[0012] Determine a focus custom function based on the manual trigger function and the event trigger function;

[0013] A focused element is determined based on the focused element feature identifier, the event information, and the focused custom function.

[0014] In one embodiment, the step of acquiring the focus of the focused element based on the focused custom function and the focused element triggering a focusing operation comprises:

[0015] Get the focused custom directive;

[0016] A focus element focus is determined based on the focus custom instruction, the focus element, and the focus custom function.

[0017] In one embodiment, the step of determining the focus of the focus element based on the focus custom instruction, the focus element and the focus custom function comprises:

[0018] Get the rendering status value;

[0019] Calling the focus method in the focus custom function based on the focus custom instruction and the focus element to determine the focus logic;

[0020] A focusing operation is performed based on the rendering state value and the focusing logic to obtain a focused element focus.

[0021] In one embodiment, the step of automatically focusing an element based on the focus of the focused element comprises:

[0022] Get page rendering information and document object model;

[0023] Inserting the focused element focus into the document object model to determine element insertion state information;

[0024] Automatically focusing the element based on the page rendering information and the element insertion status information.

[0025] In one embodiment, the step of automatically focusing the element based on the page rendering information and the element insertion status information further includes:

[0026] When the page rendering information indicates that the page is loaded or the component rendering is completed and the element insertion state information indicates that the focused element focus is successfully inserted into the document object model, automatic element focusing is performed.

[0027] In addition, to achieve the above-mentioned purpose, the present application also proposes a focus element automatic focusing device, and the focus element automatic focusing device comprises:

[0028] Get module, used to get the focused custom function and focused element;

[0029] A processing module, configured to trigger a focusing operation based on the focusing custom function and the focusing element to obtain the focus of the focusing element;

[0030] An execution module is used to automatically focus an element based on the focus of the focused element.

[0031] In addition, to achieve the above-mentioned purpose, the present application also proposes a focus element automatic focusing device, which includes: a memory, a processor, and a computer program stored in the memory and executable on the processor, and the computer program is configured to implement the steps of the focus element automatic focusing method as described above.

[0032] In addition, to achieve the above-mentioned purpose, the present application also proposes a storage medium, which is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, the steps of the focus element automatic focusing method as described above are implemented.

[0033] In addition, to achieve the above-mentioned purpose, the present application also provides a computer program product, which includes a computer program, and when the computer program is executed by a processor, the steps of the focus element automatic focusing method as described above are implemented.

[0034] One or more technical solutions proposed in this application have at least the following technical effects:

[0035] The present application proposes a method for automatically focusing a focus element, which includes obtaining a focus custom function and a focus element; triggering a focus operation based on the focus custom function and the focus element to obtain the focus of the focus element; and automatically focusing the element based on the focus of the focus element. The present application obtains the focus of the focus element by obtaining a focus custom function and a focus element, and uses a focus custom instruction to automatically trigger a focus operation to automatically focus the element when the focus element is inserted into the document object model, and responds to changes in data attributes in the instance, and performs a focus operation based on the attribute value when the element is actually inserted into the document object model, thereby avoiding secondary failure of automatic focusing, encapsulating the automatic focusing logic in the focus custom instruction, achieving high cohesion and low coupling of the code, improving development efficiency and user experience, and automatically obtaining focus without the need for additional manual operations. BRIEF DESCRIPTION OF THE DRAWINGS

[0036] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0037] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0038] Figure 1 A flowchart diagram of the first embodiment of the method for automatically focusing on a focus element of the present application;

[0039] Figure 2 A flowchart diagram of the second embodiment of the method for automatically focusing the focus element of the present application;

[0040] Figure 3 This is a schematic diagram of the module structure of the focus element automatic focusing device of the embodiment of the present application;

[0041] Figure 4 Schematic diagram of the device structure of the hardware operating environment involved in the focus element automatic focusing method in the embodiment of the present application.

[0042] The purpose, features and advantages of this application will be further described in conjunction with the embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION

[0043] It should be understood that the specific embodiments described herein are only used to explain the technical solutions of the present application and are not used to limit the present application.

[0044] In order to better understand the technical solution of the present application, a detailed description will be given below in conjunction with the accompanying drawings and specific implementation methods.

[0045] The main solution of the embodiment of the present application is: obtain a focus custom function and a focus element; trigger a focus operation based on the focus custom function and the focus element to obtain the focus of the focus element; and automatically focus the element based on the focus of the focus element.

[0046] In this embodiment, for ease of description, the following description is made by taking the automatic focusing device for identifying the focus element as the execution subject.

[0047] Although the existing technology of directly using JavaScript to manipulate DOM elements is flexible, in modern front-end frameworks, directly manipulating DOM is not elegant and efficient enough, and violates the framework's responsive system and component-based design principles. It is easy to destroy the data-driven and component-based design principles of frameworks such as Vue.js, making the code difficult to maintain and expand.

[0048] The present application provides a solution, which includes obtaining a focus custom function and a focus element; triggering a focus operation based on the focus custom function and the focus element to obtain the focus of the focus element; and automatically focusing an element based on the focus of the focus element.

[0049] It can be seen from the above embodiments that the present application obtains the focus of the focus element by obtaining the focus custom function and the focus element, and uses the focus custom instruction to automatically trigger the focus operation to automatically focus the element when the focus element is inserted into the document object model, and responds to the changes in data attributes in the instance. When the element is actually inserted into the document object model, the focus operation is performed according to the attribute value, thereby avoiding the secondary failure of automatic focus, encapsulating the automatic focus logic in the focus custom instruction, achieving high cohesion and low coupling of the code, improving development efficiency and user experience, and automatically obtaining focus without the need for additional manual operations.

[0050] Based on this, the embodiment of the present application provides a method for automatically focusing a focus element, referring to Figure 1 , Figure 1 Schematic diagram of the flow chart of the first embodiment of the focus element automatic focusing method of the present application.

[0051] In this embodiment, the focus element automatic focusing method includes steps S10 to S30:

[0052] Step S10, obtaining the focused custom function and the focused element;

[0053] It should be noted that the focus custom function reflects the feature of encapsulating the focus logic into a reusable function, and the focus element reflects the feature of the need to operate on a specific DOM element in front-end development.

[0054] It can be understood that the focus custom function provides the logic for implementing focus, which is a programming model that embodies modularity and encapsulation in programming. It is used to separate complex focus logic from business logic, making the code clearer and easier to maintain. The focus element is the object of the focus logic, indicating the target and context of the focus operation. In the Vue.js framework, the focus custom function and the focus element can be combined through custom instructions, so that the focus logic can be automatically triggered in the Vue lifecycle hook, thereby ensuring that when the element is dynamically rendered into the DOM, it can automatically obtain focus according to the conditions.

[0055] In addition, it should be noted that the focus custom function can be reused in multiple components or pages without rewriting, which improves the reusability and maintainability of the code and improves development efficiency. There is no need to manually write and bind the focus logic every time. Automatic focus can be performed based on the focus element, thereby ensuring the responsiveness and intuitiveness of the user interface, allowing users to interact with interface elements more naturally.

[0056] For ease of understanding, obtaining a focused custom function and a focused element is taken as an example for explanation, wherein the information collection device is an information collection module, and the storage device is a memory.

[0057] The information acquisition module obtains the focus element feature identifier, event information, manual trigger function and event trigger function, determines the focus custom function based on the manual trigger function and the event trigger function, determines the focus element based on the focus element feature identifier, the event information and the focus custom function, stores the focus custom function and the focus element in a memory, and performs subsequent processing based on the focus custom function and the focus element.

[0058] In a feasible implementation, step S10 may include steps A11 to A13:

[0059] Step A11, obtaining the focused element feature identifier, event information, manual trigger function and event trigger function;

[0060] It should be noted that the focus element feature identifier reflects the characteristics of the attribute identifier of the element that needs to be focused on the unique identification interface, the event information reflects the characteristics of the event trigger related to the focus operation, the manual trigger function reflects the characteristics of the function of manually controlling the focus operation, and the event trigger function reflects the characteristics of the function of the event triggering the focus operation.

[0061] It is understandable that focusing can be manually triggered by directly calling the manual trigger function in the code and passing in the corresponding focus element feature identifier, or focusing can be event-triggered by binding the call of the event trigger function to the event information. The event information may include trigger conditions related to user interaction, such as clicks, page loading completion, etc.

[0062] Step A12, determining a focused custom function based on the manual trigger function and the event trigger function;

[0063] It can be understood that the focus custom function encapsulates the focus logic, which can ensure that the focus logic is separated from other processing logics, help modularization and maintenance of the code, and make the system easier to understand and expand.

[0064] Step A13: determining a focused element based on the focused element feature identifier, the event information and the focused custom function.

[0065] It can be understood that by judging the focus state based on the focus element feature identifier and event information, it can be ensured that elements that meet specific conditions will be automatically focused, thereby improving the accuracy of the focus function. Based on the manual trigger function and event trigger function, a flexible trigger method can be provided, which can not only respond to user operations, but also be automatically triggered when specific conditions are met.

[0066] In addition, it should be noted that based on the focus element feature identifier, the event information and the focus custom function, the life cycle and data changes of the Vue.js framework can be responded to, ensuring that the focus logic is compatible with Vue's responsive and componentized design principles, thereby improving the responsiveness and user experience of the overall framework.

[0067] Step S20, triggering a focus operation based on the focus custom function and the focus element to obtain a focus element focus;

[0068] It should be noted that the focus element focus reflects the characteristics of the user input focus that a specific DOM element expects to satisfy.

[0069] It is understandable that in the Vue.js project, the v-focus custom directive can be defined through the Vue.directive method or the directives option of the component to obtain the hook function therein, such as calling the inserted hook function after the element is inserted into the DOM to perform the focus operation, and in the inserted hook function, the target element is focused through the native JavaScript .focus() method. Since the inserted hook is called after the element is inserted into the DOM, it can ensure that the element already exists on the page, thereby successfully performing the focus operation.

[0070] In addition, it should be noted that the focus custom function contains the focus logic required to perform the focus operation, and the focus element provides a specific target object. By calling the focus custom function and passing in the information of the focus element, it can be ensured that the correct element gets the focus at the appropriate time and under the appropriate conditions. The custom focus function can accurately control which elements should get the focus and when to get the focus, thereby providing a smoother and more intuitive user experience. The automated focus operation can reduce the tedious operation of users manually clicking on the input box, especially in scenarios such as forms and search fields, where users can start typing immediately without waiting. By triggering the focus operation when the element is actually inserted into the DOM, the secondary failure problem that may be encountered in the traditional automatic focus attribute in Vue.js is avoided, ensuring the reliability of the function.

[0071] For ease of understanding, the acquisition of focused custom functions and focused elements is taken as an example for explanation, wherein the information collection device is an information collection module, the storage device is a memory, and the processing device is a processing module.

[0072] The information collection module obtains a focus custom function focusElement and a focus element feature identifier elementId. The focus custom function focusElement accepts a parameter element feature identifier elementId, and then obtains a focus element through a document.getElementById() method. The focus custom function and the focus element are stored in a memory. A focus operation is triggered based on the focus custom function and the focus element to obtain a focus of the focus element, and subsequent processing is performed based on the focus of the focus element.

[0073] The focus custom function is defined as:

[0074] function focusElement(elementId){

[0075] const element=document.getElementById(elementId);

[0076] if(element){

[0077] element.focus();

[0078] }

[0079] }

[0080] Among them, the focus custom function accepts the parameter element feature identifier elementId, that is, the ID of the element to be focused, and then calls the focus() method in the focus custom function to let the specified DOM element get the focus, that is, obtain the focus of the focus element through the document.getElementById() method, and then call the focus() method in the focus custom function.

[0081] After obtaining the focus custom function, at this time, triggering and calling the focus custom function includes manual triggering and event triggering.

[0082] Manual triggering can be done by calling the function directly in the code and passing in the corresponding element ID to manually trigger the focus, if there is an input box with the ID 'myInput'.

[0083] Use focusElement('myInput') to trigger manually.

[0084] Event triggering can bind the call of the focus function to a specific event, such as page loading completion (DOMContentLoaded event), button click, etc. If there is an input box with ID 'myInput' at this time.

[0085] At this time, the event triggering method is:

[0086] document.addEventListener('DOMContentLoaded',function(){

[0087] focusElement('myInput');

[0088] });

[0089] Step S30: automatically focusing the element based on the focused element focus.

[0090] It can be understood that by utilizing the focus element focus to perform automatic focusing of the element, you can start entering information in the specified input box without manual operation, providing a smoother and more convenient interactive experience, and the automated focusing operation reduces the number of steps that users need to manually click on the input box, especially in scenarios such as forms and search fields, users can start typing immediately without waiting.

[0091] For ease of understanding, obtaining the focus of a focused element is taken as an example for explanation, wherein the information collection device is an information collection module, the storage device is a memory, and the execution device is an execution module.

[0092] The information acquisition module obtains the focus custom instruction v-focus and the rendering state value editing, obtains page rendering information, such as page loading or component rendering completion or page loading or component rendering incomplete, obtains the document object model DOM, stores the focus custom instruction, rendering state value, page rendering information and document object model in the memory, calls the focus method in the focus custom function based on the focus custom instruction and the focused element to determine the focus logic, performs a focus operation based on the rendering state value and the focus logic to obtain the focused element focus, and then inserts the focused element focus into the document object model to determine the element insertion state information, such as the element insertion state information is that the focused element focus is successfully inserted into the document object model or the focused element focus is not successfully inserted into the document object model, when the page rendering information is that the page loading or component rendering is completed and the element insertion state information is that the focused element focus is successfully inserted into the document object model, performs element automatic focusing.

[0093] In the el-input tag in the template, the focus custom instruction v-focus can be used to specify when the input box should automatically get the focus, and the focus custom instruction v-focus does not require any value, that is, it does not need the form of v-focus="someValue".

[0094] When the page rendering information is that the page is loaded or the component rendering is completed and the focus element focus is successfully inserted into the document object model, that is, when the page is loaded or the component rendering is completed and the el-input element is inserted into the DOM, the focus custom instruction v-focus will be automatically executed, so that the el-input input box gets the focus, and the user can start typing directly without manually clicking the input box.

[0095] In a feasible implementation, step S30 may include steps B11 to B13:

[0096] Step B11, obtaining page rendering information and document object model;

[0097] It should be noted that the page rendering information reflects the characteristics of the rendering preparation state of the page, and the document object model reflects the characteristics of the elements in the page that are expected to be identified and operated.

[0098] It can be understood that the page rendering information includes the page loading status and the component rendering status, which are used to determine whether it is the right time to perform automatic focusing. By obtaining the page rendering information, it can be ensured that the automatic focusing operation is performed after the page loading is completed or the component rendering is completed, avoiding attempts to focus when the element has not yet been rendered on the page. The document object model provides a structured representation of the page, which is used to identify and operate elements in the page. By obtaining the document object model, page elements can be located and operated more efficiently, providing a precise target for automatic focusing, ensuring that before automatic focusing is performed, the page and elements are in an operable state, reducing the risk of failure of the automatic focusing operation.

[0099] Step B12, inserting the focused element focus into the document object model to determine element insertion state information;

[0100] It is understandable that before performing the automatic focus operation, it is necessary to ensure that the target element has been successfully added to the structure of the page and can be interactively operated, so as to be ready to receive user input. The focus operation is performed after the element is actually inserted into the DOM, avoiding operations on elements that have not yet been rendered, thereby improving the accuracy and success rate of the operation. By checking the element insertion status information, invalid focus attempts can be avoided when the element is not successfully inserted into the DOM, thereby saving system resources and improving efficiency. After the page is loaded, it is possible to interact with elements such as input boxes immediately, enhancing the smoothness and responsiveness of the user experience.

[0101] Step B13: Automatically focus the element based on the page rendering information and the element insertion status information.

[0102] It can be understood that triggering automatic focus based on page rendering information and element insertion status information ensures that the focus operation occurs at a completely appropriate time, avoiding the problem of focusing too early or too late. Users can start typing without manual clicking after the page is loaded, providing a smooth user experience and improving the reliability and stability of the automatic focus function.

[0103] In a feasible implementation, step B13 may include step C11:

[0104] Step C11, when the page rendering information indicates that the page is loaded or the component rendering is completed and the element insertion state information indicates that the focused element focus is successfully inserted into the document object model, automatic element focusing is performed.

[0105] It is understandable that verification is performed before focusing is performed to ensure that the page rendering information and element insertion status information meet the requirements. By verifying the page rendering and element insertion status, it is ensured that focusing is performed only when the element is fully ready, thereby improving the accuracy of the operation. Once the verification is passed, the focus function is called to make the element gain focus. When the element is focused, visual or tactile feedback can be provided, such as highlighting the input box or slightly vibrating, to notify the user that the input focus is ready. If the focus operation fails to be successfully executed within the expected time, exception handling measures can be taken, such as logging, reminding the developer, or trying to refocus.

[0106] The focus element automatic focusing method proposed in this embodiment obtains the focus custom function and the focus element; based on the focus custom function and the focus element, the focus operation is triggered to obtain the focus element focus; based on the focus element focus, the element is automatically focused. The technical problem of how to automatically focus elements more flexibly is solved. Compared with the prior art, the present application defines a focus custom function and obtains the focus element, thereby automatically triggering the focus operation, achieving high cohesion and low coupling of the code, which not only significantly improves the reusability of the code, but also effectively reduces the redundancy of the code, making the project structure clearer and more concise, and facilitating subsequent maintenance and expansion. It is highly compatible with responsive systems and componentized design principles, thereby significantly improving the reusability and maintainability of the code, and at the same time ensuring that the element can automatically obtain the focus when needed, without the need for additional manual operations, intelligently responding to data changes and element insertion operations, ensuring that the focus is automatically given to the specified element at the appropriate time, without the need for developers to perform additional manual operations, and effectively improving the user experience.

[0107] Based on the first embodiment of the present application, in the second embodiment of the present application, the same or similar contents as those in the above-mentioned embodiment 1 can be referred to the above introduction and will not be repeated later.

[0108] In this embodiment, refer to Figure 2 , Figure 2 The flowchart of the second embodiment of the method for automatically focusing the focus element of the present application is provided, wherein step S20 specifically includes steps S21 to S22:

[0109] Step S21, obtaining a focus custom instruction;

[0110] It should be noted that the focus custom instruction reflects the feature of binding the automatic focus logic with the life cycle events of the DOM element.

[0111] It is understandable that the focus custom instruction is an example of a custom instruction in the Vue.js framework. Through the custom instruction mechanism of Vue.js, the logic of automatic focus is cleverly encapsulated in the v-focus instruction, achieving high cohesion and low coupling of the code, so that developers can easily reuse the v-focus instruction in multiple components or pages without having to repeatedly write the code of the focus logic in each place, greatly improving the development efficiency. At the same time, the encapsulated v-focus instruction can be easily introduced into the project as an independent unit, significantly improving the reusability of the code. Whether in the development process of a new project or in the maintenance phase of an existing project, this instruction can be quickly applied to effectively reduce duplication of work. In addition, thanks to the responsive system of Vue.js, the v-focus instruction can intelligently respond to changes in data and operations such as insertion and updating of elements, and is automatically executed in the life cycle hook of Vue, such as when an element is inserted into the DOM, and when the page element is re-rendered due to data changes, the v-focus instruction can ensure that the element automatically obtains focus when needed, without the need for developers to perform additional manual operations, further improving user experience and development efficiency.

[0112] In addition, it should be noted that the use of the focus custom instruction can determine when and how to apply the focus logic to a specific element, separate the focus behavior from the rendering and updating of the element, so that the focus logic can be executed more flexibly and reliably in Vue's responsive system, improving the clarity and maintainability of the code, and the focus custom instruction can utilize Vue's responsive system to automatically respond to data changes and element life cycle events, ensuring that the focus operation is performed at the right time, and can be reused in multiple components without the need to repeatedly write the focus logic, thereby improving the reusability of the code.

[0113] For ease of understanding, the acquisition of focus custom instructions is taken as an example for explanation, wherein the information collection device is an information collection module, the storage device is a memory, and the processing device is a processing module.

[0114] The information acquisition module obtains the focus custom instruction v-focus and stores it in the memory, and performs subsequent processing based on the focus custom instruction.

[0115] The focus custom directive v-focus is defined as:

[0116] Vue.directive('focus',{

[0117] Inserted: function (el) {

[0118] el.focus();

[0119] }

[0120] });

[0121] In a Vue template, you can use the v-focus directive like this:

[0122] <el-input v-if=”editing”autofocus v-focus=”true”>

[0123] Among them, the focus custom instruction v-focus receives the rendering state value editing as the value, which determines whether the el-input element will be rendered into the document object model DOM, and the focus custom instruction v-focus can monitor the changes of the editing data attribute in the Vue instance, and perform the focus operation according to the value of editing when the element is actually inserted into the DOM.

[0124] Step S22: determining a focus element focus based on the focus custom instruction, the focus element and the focus custom function.

[0125] It can be understood that by calling the custom focus function and combining the data of the Vue instance, such as the rendering status value, to determine the final focus logic, the steps that users need to manually operate can be reduced, and the focus logic can be encapsulated in a custom instruction, making the code more modular, easy to maintain and expand, ensuring that the focus operation is performed only when the element really needs to be focused, avoiding unnecessary calculations and operations, thereby saving system resources, improving the responsiveness and intuitiveness of the user interface, and enabling users to interact with interface elements more naturally.

[0126] For ease of understanding, the following is explained by taking obtaining a focus custom instruction, a focus element, and a focus custom function as an example, wherein the information collection device is an information collection module, the storage device is a memory, and the processing device is a processing module.

[0127] The information acquisition module obtains a custom focus function focusElement and a feature identifier of a focused element elementId. The custom focus function focusElement accepts a parameter element feature identifier elementId, obtains a focused element through the document.getElementById() method, calls its focus() method to focus the element, obtains a custom focus instruction v-focus and a rendering state value editing, stores the custom focus function, the focused element, the custom focus instruction and the rendering state value in a memory, triggers a focus operation based on the custom focus function and the focused element to obtain a focus of the focused element, calls a focus method in the custom focus function based on the custom focus instruction and the focused element to determine a focus logic, executes a focus operation based on the rendering state value and the focus logic to obtain a focus of the focused element, and performs automatic focusing based on the focus of the focused element.

[0128] In a feasible implementation, step S22 may include steps D11 to D13:

[0129] Step D11, obtaining a rendering status value;

[0130] It should be noted that the rendering state value reflects the characteristics of the rendering readiness state of the page or component at a specific moment.

[0131] It can be understood that the rendering status value indicates whether the DOM element has been completely rendered and is ready for interaction. By checking the rendering status value, the focus operation can be performed only after the element is completely rendered and ready, avoiding focusing on elements that are not completely rendered, thereby preventing focus failure, and being able to interact with elements such as input boxes immediately after the page is loaded, thereby enhancing the smoothness and responsiveness of the user experience, avoiding invalid focus attempts when elements are not successfully inserted or rendering is not completed, saving system resources and improving efficiency.

[0132] In addition, it should be noted that the rendering status of the current page or component can be obtained through programming logic, including checking certain specific flags or calling related APIs, and then evaluating the obtained rendering status value to determine whether the conditions for performing the focus operation are met. The decision whether to continue executing the focus logic is based on the rendering status value. If the status value indicates that the element has not yet been rendered, the focus operation needs to be delayed or canceled, thereby improving the reliability of the operation.

[0133] Step D12, calling a focus method in the focus custom function based on the focus custom instruction and the focus element to determine a focus logic;

[0134] It is understandable that allowing developers to customize the focus logic for different elements or conditions improves the flexibility and adaptability of the focus function, enables the focus operation to be performed at the best time, avoids delays in user interface response, and encapsulates the focus logic in a custom function, making the code more modular and easy to maintain.

[0135] Step D13, performing a focusing operation based on the rendering state value and the focusing logic to obtain a focused element focus.

[0136] It is understandable that a focus function or method can be called, and the ID of the element to be focused can be passed in. If the focus operation fails to be successfully performed under the expected conditions, exception handling is performed, such as retrying the focus operation or recording error information for subsequent analysis. After the element successfully obtains the focus, feedback needs to be provided to the user or system to improve the user experience.

[0137] The focus element automatic focusing method proposed in this embodiment obtains a focus custom instruction; and determines the focus of the focus element based on the focus custom instruction, the focus element, and the focus custom function. The technical problem of how to perform automatic element focusing more efficiently is solved. Compared with the prior art, the present application obtains and applies a focus custom instruction, combines the defined focus element and focus function to determine the element focus, and uses the focus custom instruction to automatically trigger the focus operation when the focus element is inserted into the document object model, thereby automatically focusing the element, and responds to changes in data attributes in the instance to ensure that the focus operation is performed according to the attribute value when the element is actually inserted into the document object model, thereby avoiding secondary failure of automatic focusing and effectively improving the user experience.

[0138] It should be noted that the above examples are only used to understand the present application and do not constitute a limitation on the automatic focusing method of the focus element of the present application. More simple transformations based on this technical concept are all within the scope of protection of the present application.

[0139] This application also provides a focus element automatic focusing device, please refer to Figure 3 , the focus element automatic focusing device comprises:

[0140] An acquisition module 10 is used to acquire a focused custom function and a focused element;

[0141] A processing module 20 is used to trigger a focusing operation based on the focusing custom function and the focusing element to obtain a focus of the focusing element;

[0142] The execution module 30 is used to automatically focus the element based on the focus element focus.

[0143] The acquisition module 10 is also used to acquire the feature identifier of the focus element, event information, manual trigger function and event trigger function;

[0144] Determine a focus custom function based on the manual trigger function and the event trigger function;

[0145] A focused element is determined based on the focused element feature identifier, the event information, and the focused custom function.

[0146] The processing module 20 is also used to obtain a focus custom instruction;

[0147] A focus element focus is determined based on the focus custom instruction, the focus element, and the focus custom function.

[0148] The processing module 20 is also used to obtain a rendering status value;

[0149] Calling the focus method in the focus custom function based on the focus custom instruction and the focus element to determine the focus logic;

[0150] A focusing operation is performed based on the rendering state value and the focusing logic to obtain a focused element focus.

[0151] The execution module 30 is also used to obtain page rendering information and a document object model;

[0152] Inserting the focused element focus into the document object model to determine element insertion state information;

[0153] Automatically focusing the element based on the page rendering information and the element insertion status information.

[0154] The execution module 30 is further configured to execute element automatic focusing when the page rendering information indicates that the page is loaded or the component rendering is completed and the element insertion state information indicates that the focused element focus is successfully inserted into the document object model.

[0155] The focus element automatic focusing device provided by the present application adopts the focus element automatic focusing method in the above embodiment, which can solve the technical problem of efficiently and flexibly performing focus element automatic focusing while following the framework design principle. Compared with the prior art, the beneficial effects of the focus element automatic focusing device provided by the present application are the same as the beneficial effects of the focus element automatic focusing method provided by the above embodiment, and other technical features in the focus element automatic focusing device are the same as the features disclosed in the above embodiment method, which will not be repeated here.

[0156] The present application provides a focus element automatic focusing device, which includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the focus element automatic focusing method in the above-mentioned embodiment one.

[0157] Reference below Figure 4 , which shows a schematic diagram of the structure of a focus element automatic focusing device suitable for implementing the embodiment of the present application. The focus element automatic focusing device in the embodiment of the present application may include but is not limited to mobile terminals such as mobile phones, laptop computers, digital broadcast receivers, PDAs (Personal Digital Assistants), PADs (Portable Application Descriptions), PMPs (Portable Media Players), vehicle-mounted terminals (such as vehicle-mounted navigation terminals), etc., and fixed terminals such as digital TVs, desktop computers, etc. Figure 4 The focus element automatic focusing device shown is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0158] like Figure 4As shown, the focus element automatic focusing device may include a processing device 1001 (e.g., a central processing unit, a graphics processor, etc.), which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM: Read Only Memory) 1002 or a program loaded from a storage device 1003 to a random access memory (RAM: Random Access Memory) 1004. In RAM1004, various programs and data required for the operation of the focus element automatic focusing device are also stored. The processing device 1001, ROM1002, and RAM1004 are connected to each other through a bus 1005. An input / output (I / O) interface 1006 is also connected to the bus. Generally, the following systems can be connected to the I / O interface 1006: an input device 1007 including, for example, a touch screen, a touch pad, a keyboard, a mouse, an image sensor, a microphone, an accelerometer, a gyroscope, etc.; an output device 1008 including, for example, a liquid crystal display (LCD: Liquid Crystal Display), a speaker, a vibrator, etc.; a storage device 1003 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 1009. The communication device 1009 can allow the focus element automatic focusing device to communicate with other devices wirelessly or by wire to exchange data. Although the focus element automatic focusing device with various systems is shown in the figure, it should be understood that it is not required to implement or have all the systems shown. More or fewer systems can be implemented or have instead.

[0159] In particular, according to the embodiments disclosed in the present application, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present application include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication device, or installed from a storage device 1003, or installed from a ROM 1002. When the computer program is executed by the processing device 1001, the above-mentioned functions defined in the method of the embodiment disclosed in the present application are executed.

[0160] The focus element automatic focusing device provided by the present application adopts the focus element automatic focusing method in the above embodiment, which can solve the technical problem of efficiently and flexibly performing focus element automatic focusing while following the framework design principle. Compared with the prior art, the beneficial effects of the focus element automatic focusing device provided by the present application are the same as the beneficial effects of the focus element automatic focusing method provided by the above embodiment, and other technical features in the focus element automatic focusing device are the same as the features disclosed in the method of the previous embodiment, which will not be repeated here.

[0161] It should be understood that the various parts disclosed in this application can be implemented by hardware, software, firmware or a combination thereof. In the description of the above embodiments, specific features, structures, materials or characteristics can be combined in any one or more embodiments or examples in a suitable manner.

[0162] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

[0163] The present application provides a computer-readable storage medium having computer-readable program instructions (ie, computer programs) stored thereon, and the computer-readable program instructions are used to execute the focus element automatic focusing method in the above-mentioned embodiment.

[0164] The computer-readable storage medium provided in the present application may be, for example, a USB flash drive, but is not limited to electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, systems or devices, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In this embodiment, the computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, system or device. The program code contained on the computer-readable storage medium may be transmitted using any appropriate medium, including but not limited to: wires, optical cables, RF (Radio Frequency), etc., or any suitable combination of the above.

[0165] The computer-readable storage medium may be included in the focus element automatic focusing device; or may exist independently without being assembled into the focus element automatic focusing device.

[0166] The above-mentioned computer-readable storage medium carries one or more programs. When the above-mentioned one or more programs are executed by the focus element automatic focusing device, the focus element automatic focusing device: obtains a focus custom function and a focus element; triggers a focus operation based on the focus custom function and the focus element to obtain the focus of the focus element; and performs element automatic focusing based on the focus of the focus element.

[0167] Computer program code for performing the operations of the present application may be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0168] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present application. In this regard, each square box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two square boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0169] The modules involved in the embodiments described in this application may be implemented by software or hardware, wherein the name of the module does not constitute a limitation on the unit itself in some cases.

[0170] The readable storage medium provided by the present application is a computer-readable storage medium, which stores computer-readable program instructions (i.e., a computer program) for executing the above-mentioned focus element automatic focusing method, and can solve the technical problem of efficiently and flexibly performing focus element automatic focusing while following the framework design principle. Compared with the prior art, the beneficial effects of the computer-readable storage medium provided by the present application are the same as the beneficial effects of the focus element automatic focusing method provided by the above-mentioned embodiment, and will not be repeated here.

[0171] The present application also provides a computer program product, including a computer program, which implements the steps of the focus element automatic focusing method as described above when the computer program is executed by a processor.

[0172] The computer program product provided by the present application can solve the technical problem of efficiently and flexibly automatically focusing the focus element while following the framework design principle. Compared with the prior art, the beneficial effects of the computer program product provided by the present application are the same as the beneficial effects of the focus element automatic focusing method provided by the above embodiment, which will not be repeated here.

[0173] The above descriptions are only some embodiments of the present application, and are not intended to limit the patent scope of the present application. All equivalent structural changes made using the contents of the present application specification and drawings under the technical concept of the present application, or direct / indirect applications in other related technical fields are included in the patent protection scope of the present application.

Claims

1. A method for automatically focusing a focus element, characterized in that: The method includes: Get the focused custom function and focused element; Triggering a focus operation based on the focus custom function and the focus element to obtain the focus of the focus element; The element is automatically focused based on the focused element focus.

2. The method according to claim 1, characterized in that The steps of obtaining the focused custom function and the focused element include: Get the focused element feature identifier, event information, manual trigger function and event trigger function; Determine a focus custom function based on the manual trigger function and the event trigger function; A focused element is determined based on the focused element feature identifier, the event information, and the focused custom function.

3. The method according to claim 1, characterized in that The step of triggering a focus operation based on the focus custom function and the focus element to obtain the focus of the focus element comprises: Get the focused custom directive; A focus element focus is determined based on the focus custom instruction, the focus element, and the focus custom function.

4. The method according to claim 3, characterized in that The step of determining the focus of the focus element based on the focus custom instruction, the focus element and the focus custom function comprises: Get the rendering status value; Calling the focus method in the focus custom function based on the focus custom instruction and the focus element to determine the focus logic; A focusing operation is performed based on the rendering state value and the focusing logic to obtain a focused element focus.

5. The method according to claim 1, characterized in that The step of automatically focusing an element based on the focus element focus comprises: Get page rendering information and document object model; Inserting the focused element focus into the document object model to determine element insertion state information; Automatically focusing the element based on the page rendering information and the element insertion status information.

6. The method according to claim 5, characterized in that The step of automatically focusing the element based on the page rendering information and the element insertion status information further includes: When the page rendering information indicates that the page is loaded or the component rendering is completed and the element insertion state information indicates that the focused element focus is successfully inserted into the document object model, automatic element focusing is performed.

7. A focus element automatic focusing device, characterized in that: The device comprises: Get module, used to get the focused custom function and focused element; A processing module, configured to trigger a focusing operation based on the focusing custom function and the focusing element to obtain the focus of the focusing element; An execution module is used to automatically focus an element based on the focus of the focused element.

8. A focus element automatic focusing device, characterized in that: The device comprises: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program is configured to implement the steps of the focus element automatic focusing method according to any one of claims 1 to 6.

9. A storage medium, characterized in that: The storage medium is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, the steps of the focus element automatic focusing method as described in any one of claims 1 to 6 are implemented.

10. A computer program product, characterized in that The computer program product comprises a computer program, which, when executed by a processor, implements the steps of the focus element automatic focusing method according to any one of claims 1 to 6.

Images