An element intelligent sorting and focus switching control component based on Vue.js

Abstract

This invention relates to the field of web front-end development technology, proposing an intelligent element sorting and focus switching control component based on Vue.js. The component includes: an entry component module providing external service interfaces for the navigation system; a control and coordination module implementing complete component lifecycle management, DOM structure monitoring, and event binding control; a basic service module providing element scanning, position calculation, and availability detection technologies for other modules; an intelligent spatial navigation algorithm module based on a geometric center point-based intelligent directional navigation algorithm; and an interaction control module for keyboard.js event control, implementing cursor position awareness, dual-mode navigation control, and event lifecycle management. This solution addresses the problems of high development cost and high technical complexity in web form directional key navigation technology.

Description

Technical Field

[0001] This invention relates to the field of web front-end development technology, specifically providing a component for intelligent element sorting and focus switching control based on Vue.js. Background Technology

[0002] Web forms serve as the user interface for web applications, responsible for data collection, validation, and submission. Modern forms typically contain various form elements such as text input boxes, multi-line text areas, and dropdown selection boxes, which create complex spatial layouts on the page.

[0003] Traditional web form navigation relies on the Tab key to switch focus between elements, following the linear traversal order of the DOM tree (i.e., tabindex order). This linear navigation mode has problems when dealing with two-dimensional grid layouts and multi-list designs: the Tab key's jump path does not match the user's expectations based on visual spatial relationships, resulting in a non-intuitive navigation experience.

[0004] In terms of technical implementation and user experience design, there are four main technical problems:

[0005] 1. Static limitations of navigation relationship construction

[0006] Existing technologies typically employ hard-coded element relationship mappings, requiring developers to manually configure the top, bottom, left, and right adjacent relationships of each form element. This static configuration method increases development complexity and maintenance costs, and cannot adapt to dynamic content changes. In modern web applications, form content is adjusted based on user interaction, data status, or business logic, including scenarios such as conditional field display, dynamic form item addition, and asynchronous Ajax content loading. Due to the lack of a DOM structure change monitoring mechanism, when the form layout changes, the preset navigation relationships become invalid, leading to problems such as incorrect navigation targets, focus jumping to non-existent elements, or unresponsive arrow keys.

[0007] 2. Limitations of spatial location calculation algorithms

[0008] Existing solutions typically employ simplified coordinate comparison methods, relying on basic element position attributes (such as offsetLeft and offsetTop) for numerical comparison. This calculation method ignores geometric relationships in two-dimensional space and lacks consideration for spatial factors such as element size, relative position, and visual distance. In page structures such as grid layouts, multiple lists, and nested containers, simple coordinate comparisons can produce navigation results that do not meet user expectations. For example, when a user presses the right arrow key expecting to jump to a visually adjacent element on the right, the algorithm may select the more distant element due to the difference in Y-coordinates, causing the focus to jump to an unexpected location.

[0009] 3. Lack of cursor awareness in the interaction mechanism

[0010] Existing solutions lack consideration for the cursor state within the input box. Typical solutions do not distinguish whether the cursor is at the beginning, end, or middle of the text input box, causing conflicts between arrow key navigation and native text editing behavior in Web standards. When a user is editing text within an input box, the arrow keys should move the cursor, not jump across elements. Furthermore, typical solutions use a single navigation trigger mode, failing to differentiate between different user intentions and lacking flexibility. Users cannot force cross-element navigation under specific needs, nor can they disable navigation when not needed.

[0011] 4. Event management deficiencies in the underlying architecture

[0012] Existing implementations typically employ simple global event binding strategies, lacking event lifecycle management and prone to issues such as duplicate binding, event conflicts, and memory leaks. In modern Single Page Application (SPA) environments, when components are created and destroyed, event listeners for destroyed components may persist in memory, accumulating performance impact over time. Furthermore, there is a lack of consideration for browser compatibility, performance optimization, and error recovery, making it difficult to guarantee stability in production environments.

[0013] The aforementioned technical limitations result in a less intuitive keyboard navigation experience for web forms compared to desktop applications. Due to high development costs and technical complexity, tables and forms in enterprise applications, data entry systems, and other business scenarios typically do not offer a navigation experience similar to desktop software like Excel. This lack of experience impacts the practicality of web applications in specialized fields.

[0014] Based on the above problem analysis, the market needs a web form directional key navigation technology solution with intelligent, automated, and low development cost features to lower the implementation threshold of such functions, enable more web applications to provide a navigation experience similar to desktop software, and improve the user experience and data operation efficiency of enterprise-level web applications. Summary of the Invention

[0015] To overcome the above-mentioned shortcomings, this invention provides a component for intelligent element sorting and focus switching control based on Vue.js, including:

[0016] Entry component module: Provides external service interfaces for the navigation system. It is built using the Vue single-file component architecture pattern, contains a single div container element as the scope boundary of the navigation system, and receives form content through a slot mechanism;

[0017] Control and Coordination Module: Built on the Vue 3 Composition API technology stack, it implements complete component lifecycle management, DOM structure listening, and event binding control;

[0018] Basic service module: Provides foundational technologies for element scanning, location calculation, and availability detection for other modules;

[0019] Intelligent spatial navigation algorithm module: The intelligent direction navigation algorithm based on geometric center point achieves navigation target selection through the synergistic effect of geometric analysis, direction filtering, and weight scoring;

[0020] Interactive control module: This module controls events in keyboard.js, enabling cursor position awareness, dual-mode navigation control, and event lifecycle management.

[0021] Furthermore, the script logic of the entry component module includes the following two operations:

[0022] The useInputScan composite function is introduced using ES6 module import syntax, which encapsulates the complete navigation logic implementation;

[0023] By using destructuring assignment syntax to extract the containerRef reactive reference from the return value of the useInputScan function, a data binding relationship between the template and the logic is established.

[0024] Furthermore, the control and coordination module is implemented through the useInputScan composite function. Inside the useInputScan composite function, a containerRef reactive reference is created through Vue's ref API to store the container DOM element passed by the entry component. The useInputScan composite function defines two methods: bindAllElements and unbindAllElements.

[0025] Furthermore, the bindAllElements method first verifies the validity of the container reference, then scans all relevant elements within the container based on the predefined form element selector using the querySelectorAll API, and finally calls the bindKeyboardEvents function for each element through forEach to establish event listener relationships;

[0026] The `unbindAllElements` method first verifies the validity of the container reference, then scans all relevant elements within the container using the `querySelectorAll` API based on a predefined form element selector, and finally removes the event listeners for each element by calling the `unbindKeyboardEvents` function.

[0027] Furthermore, the useInputScan composite function integrates a real-time DOM listening mechanism based on the MutationObserver API. During the component mounting phase, the system creates a MutationObserver instance and configures it to listen for changes in all child elements within the container. When MutationObserver detects a modification to the DOM structure, it first calls unbindAllElements to clean up the event listeners of all existing elements, and then calls bindAllElements to rescan the container and establish a complete event listening relationship for the new element structure.

[0028] Furthermore, the basic service module specifically includes:

[0029] The getElementPosition function is used to calculate the absolute position and size information of an element in the document coordinate system;

[0030] The isFormElementUsable function is used to detect whether a form element is available and to filter hidden, disabled, and read-only elements.

[0031] The scanFormElements function scans all available form elements within a container and returns an array of objects containing their positions.

[0032] The FORM_ELEMENT_SELECTORS function is used to define standardized form element selector rule constants.

[0033] Furthermore, the interactive control module first establishes a standardized mapping relationship between the arrow keys and navigation functions. It directly associates keyboard event codes with corresponding navigation algorithm functions through the DIRECTION_ACTIONS object, uses the WeakSet data structure to maintain event binding state management, and tracks the set of elements of bound event listeners through the boundElements global variable.

[0034] Furthermore, in the interactive control module, the dual-mode navigation control includes a boundary-triggered mode and a forced navigation mode.

[0035] The boundary trigger mode is implemented through the handleInputBoundaryNavigation function, and the trigger condition is determined by the shouldHandleBoundaryNavigation function. The system will only activate the cross-element navigation function when the user presses the arrow key in the supported input box type and the cursor is located on the corresponding boundary.

[0036] Forced navigation mode is implemented through the handleModifierKeyNavigation function. Users can force cross-element navigation at any cursor position by pressing the Ctrl key or Cmd key in combination with the arrow keys, which meets the need for quick navigation in specific business scenarios.

[0037] Furthermore, during the system startup phase, the data flow begins with the index.vue entry component establishing a container reference through the useInputScan composite function. Subsequently, useInputScan calls the bindAllElements function in the onMounted lifecycle hook, which scans the form elements within the container using the FORM_ELEMENT_SELECTORS selector from the tools.js module. For each valid element, the bindKeyboardEvents function from the keyboard.js module is called to establish an event listener relationship. At the same time, a MutationObserver instance is started to listen for changes in the DOM structure.

[0038] Furthermore, when user interaction is triggered, the data flow first occurs when the user presses an arrow key on a form element, triggering the keydown event. The event handler of the keyboard.js module receives the event and determines the cursor position and modifier key state. Based on the determination result, the corresponding navigation algorithm function of the find.js module is called. The navigation algorithm scans container elements and calculates the navigation target through the tools.js module. The final result is returned to the keyboard.js module to perform the focus switching operation.

[0039] The working principle and beneficial effects of this invention:

[0040] In implementing the technical solution of this invention, the modular architecture design achieves the technical characteristics of high cohesion and low coupling. Each module has highly cohesive internal functions and clearly defined responsibilities. Modules interact through standardized function interfaces, reducing system coupling and improving maintainability. This design allows the basic tool function module, core algorithm module, event control module, and composable function module to be independently optimized and extended, providing an architectural foundation for the system's functional evolution. It not only ensures the current system's stability and reliability but also lays a solid technical foundation for the long-term development and continuous improvement of the technical solution, reflecting the practical norms of modern software engineering. Attached Figure Description

[0041] The disclosure of this invention will become more readily understood with reference to the accompanying drawings. It will be readily understood by those skilled in the art that these drawings are for illustrative purposes only and are not intended to limit the scope of protection of this invention. Furthermore, similar numbers in the drawings are used to denote similar components, wherein:

[0042] Figure 1 This is a schematic diagram of the structure of an element intelligent sorting and focus switching control component based on Vue.js, according to the present invention.

[0043] Figure 2 This is a schematic diagram of the system initialization process of the present invention;

[0044] Figure 3 This is a schematic diagram of the keyboard navigation interaction process of the present invention. Detailed Implementation

[0045] Some embodiments of the present invention will now be described with reference to the accompanying drawings. Those skilled in the art should understand that these embodiments are merely illustrative of the technical principles of the present invention and are not intended to limit the scope of protection of the present invention.

[0046] In this embodiment of the invention, to further illustrate the specific manifestations of the aforementioned technical deficiencies in actual business scenarios, the following analysis will be conducted in detail through four typical scenarios of information technology application in the poultry breeding industry:

[0047] Scenario Simulation 1: Chaotic navigation paths in a multi-column grid form

[0048] In the poultry registration module of the egg-laying hen breeding system, technicians need to input a complete set of basic information data for the breeding chickens. The form uses a standard multi-column grid layout, including key fields such as breeder number, breed code, date of birth, vaccination status, and weight record. These input boxes are presented as a neat two-dimensional matrix on the page according to business logic. However, when technicians try to navigate using the traditional Tab key, the focus switching order strictly follows the linear traversal logic of the DOM tree, causing the operation path to jump directly from the "breeder number" on the left side of the first row to the "vaccination date" on the third row, and then to the "weight record" on the right side of the second row, forming a random jumping pattern that completely violates the user's visual spatial expectations. Technicians naturally expect an intuitive navigation path from left to right and top to bottom, but the actual experience is a chaotic and inefficient non-continuous jump. This inconsistency in navigation logic seriously affects the efficiency and accuracy of data entry and increases the probability of operational errors.

[0049] Scenario Simulation 2: Navigation Failure Due to Changes in Dynamic Form Content

[0050] In broiler feed formulation management systems, nutritionists need to dynamically adjust the feed nutrient ratios according to the different growth stages of the flock. The system automatically adjusts the form structure based on the selected growth stage: selecting "Chick Formulation" dynamically displays 8 basic nutrient input boxes; switching to "Growing Formulation" adds 3 additional nutrient fortifier input boxes; and selecting "Laying Formulation" displays 12 completely different special nutrient indicator input boxes. Because statically preset element relationships are typically used, the pre-configured navigation mappings immediately become invalid when the form content changes dynamically. Nutritionists frequently encounter functional malfunctions such as focus jumping to hidden elements, incorrect navigation target positioning, or complete unresponsiveness of the arrow keys when pressing them during operation, forcing them to frequently rely on the mouse for repositioning. This interruption disrupts the continuity of keyboard operation and overall work efficiency.

[0051] Scenario Simulation 3: Navigation efficiency bottleneck in batch data entry scenario

[0052] In the daily egg production statistics module of the egg production management system, statisticians face the demanding task of rapidly entering egg production data for 100 chicken houses daily. Traditional web forms only allow linear navigation via the Tab key, a single navigation mode that exposes a serious efficiency bottleneck in batch data entry scenarios. Specifically, after a statistician enters "1250" into the egg production input box for "Chicken House A01," the cursor naturally ends at the end of the input box. The most intuitive expectation would be to use the right arrow key to jump directly to the visually adjacent "Chicken House A02" input box, which would significantly improve the efficiency of continuous data entry. However, due to the complexity and high development cost of implementing such spatial location-based intelligent directional navigation technology, the system does not provide this function. Statisticians are forced to either use the Tab key to navigate through multiple business-irrelevant fields such as "Remarks" and "Anomaly Markers" in DOM order to reach the target input box, or interrupt keyboard operations to use the mouse for clicking and positioning. Similarly, when it is necessary to enter historical data from the previous row and column for comparison, due to the same technical limitations, the system does not provide intelligent vertical navigation support. This lack of navigation function severely restricts the continuity and overall efficiency of data entry, turning what should have been a smooth operation on the keyboard into frequent Tab key presses or mouse positioning operations.

[0053] Scenario Simulation 4: The High Technical Costs of Independently Developing Directional Key Navigation

[0054] During the development of the hatching record module for the poultry data acquisition system, the development team decided to independently develop a directional navigation function to address users' needs for data entry efficiency. This module features a complex form structure dynamically generated based on the hatching progress. Each hatching batch requires the input of multi-dimensional parameters such as the source and quantity of hatching eggs, ambient temperature, and humidity control. Furthermore, the form layout is adjusted in real-time based on the business needs of different hatching stages. After accepting this technical challenge, the front-end development engineers quickly discovered that the complexity of the implementation far exceeded expectations. The primary technical challenge was manually binding a keydown event listener to each input box element and writing nearly 200 lines of core logic code to handle navigation algorithms in four directions (up, down, left, and right), including calculating element coordinates, intelligently determining the nearest neighbor element, and properly handling page boundary conditions. An even more difficult technical challenge was managing the lifecycle of dynamic elements: when users switch hatching stage configurations on the interface, some input box elements are hidden while new input boxes are dynamically displayed. Engineers had to write a large amount of additional code to remove the event listeners of the hidden elements and re-establish event binding relationships for the newly appearing elements; otherwise, it would lead to serious memory leaks and functional abnormalities. After three weeks of continuous development and repeated debugging, although the basic functionality was achieved, the final code was extremely complex, containing a large amount of hard-coded element spatial relationship mapping logic, resulting in exceptionally high maintenance costs. When business requirements changed and the form layout structure needed to be adjusted, the engineers found that almost all navigation logic implementations had to be rewritten. This technical approach clearly lacked scalability and long-term maintainability.

[0055] The analysis of the four application scenarios above reveals the fundamental technical problems and needs that current Web form navigation technology faces in real-world business scenarios.

[0056] From a technical perspective, Scenario 1 reveals that traditional tab-based linear navigation does not align with users' intuitive visual-spatial relationships, resulting in a less intuitive navigation experience in two-dimensional grid-layout forms. Scenario 2, from a technical architecture perspective, demonstrates the adaptability issues of static preset navigation methods when faced with dynamic content changes; the navigation function fails when the form layout is adjusted. Scenario 3, from a business needs perspective, explains that due to the high development cost and technical complexity of intelligent directional navigation, web platforms generally do not provide such functionality, creating an efficiency bottleneck. Scenario 4, from an engineering implementation perspective, illustrates the technical challenges of independently developing directional navigation functionality, including complex event management, high code coupling, and high maintenance costs.

[0057] From the perspective of problem correlation, these four application scenarios constitute a chain of technical problems: the contradiction between users' demand for form navigation experience and the incompatibility of Tab key linear navigation with the needs of two-dimensional space operation; although the directional key navigation function can be implemented by self-development, the required development cost and maintenance investment are high, and it is difficult to have good universality and scalability; at the same time, the dynamic content change requirements that are common in modern web applications further increase the complexity of technical implementation, and traditional static configuration solutions are not suitable for actual production environments.

[0058] Example 1

[0059] Figure 1 This is a schematic diagram of the structure of a component for intelligent element sorting and focus switching control based on Vue.js, as described in this invention. Figure 1 As shown in the figure, the intelligent element sorting and focus switching control component implemented based on Vue.js in this embodiment mainly includes the following modules.

[0060] 1. Entry component: AutoNavigation module

[0061] It encapsulates the internal implementation logic through a simplified API, provides external service interfaces for the navigation system, is built using the Vue single-file component architecture pattern, contains a single div container element as the scope boundary of the navigation system, and receives form content through a slot mechanism.

[0062] In one implementation, the entry component template employs a simplified DOM structure, containing a single div container element as the scope boundary of the navigation system. This container establishes a DOM access channel with JavaScript logic through Vue's template referencing mechanism (ref="containerRef"), allowing composed functions to obtain references to the container element. The template internally uses a default slot mechanism to receive form content. This design pattern makes the component versatile and flexible, allowing it to wrap form structures without modifying the component's own code.

[0063] In one implementation, the entry component script is built based on Vue 3's Composition API design pattern, simplifying component declaration syntax through setup syntactic sugar. The entry component script logic contains only two key operations: first, the useInputScan compositional function is imported using ES6 module import syntax, which encapsulates the complete navigation logic implementation; then, the containerRef reactive reference is extracted from the return value of the useInputScan function using destructuring assignment syntax, establishing a data binding relationship between the template and the logic.

[0064] In this embodiment, the entry component design pattern embodies the principles of front-end architecture—separation of concerns and the single responsibility principle. The entry component focuses on providing DOM container and slot rendering services, while navigation algorithms, event management, lifecycle control, and other logic are encapsulated within composite functions. This architectural design decouples the interface from business logic, improves code maintainability, and provides an architectural foundation for subsequent feature expansion and technical optimization. Developers can enhance or optimize navigation functionality by adjusting the internal implementation of composite functions without modifying the entry component code.

[0065] 2. Control and Coordination Module

[0066] Implemented using the `useInputScan` combo function, built upon Vue 3's Composition API stack, it provides complete component lifecycle management, DOM structure monitoring, and event binding control. The `useInputScan` combo function encapsulates all reactive state management and lifecycle hook logic related to the Vue framework, providing components with a concise and unified functional interface.

[0067] In one implementation, the `useInputScan` composite function internally creates a reactive `containerRef` using Vue's `ref` API to store the container DOM element passed from the entry component. This reactive design ensures that when the container element changes, the relevant dependency functions can automatically detect and perform corresponding update operations. The use of reactive references not only conforms to Vue 3's data flow management specifications, but more importantly, it provides a stable and reliable element access mechanism for subsequent DOM operations.

[0068] In one implementation, the `useInputScan` composite function defines two core methods, `bindAllElements` and `unbindAllElements`, to achieve batch management of keyboard events for form elements. The `bindAllElements` method first verifies the validity of the container reference, then scans all relevant elements within the container using the `querySelectorAll` API based on a predefined form element selector, and finally iterates through each element using `forEach` to call the `bindKeyboardEvents` function to establish event listener relationships for each element. The `unbindAllElements` method uses the same element scanning logic, but removes the event listeners for each element by calling the `unbindKeyboardEvents` function, ensuring that all event bindings are completely cleaned up when the component is destroyed, preventing memory leaks.

[0069] In one implementation, the `useInputScan` composite function integrates a real-time DOM monitoring mechanism based on the MutationObserver API. During the component mounting phase, the system creates a MutationObserver instance and configures it to monitor changes to all child elements within the container, including operations such as adding, deleting, and repositioning elements. This solves the technical challenge of dynamically changing form content in modern web applications.

[0070] Specifically, when MutationObserver detects a modification to the DOM structure, the system immediately executes a "clean-up then rebuild" event binding update strategy: first, it calls unbindAllElements to clean up all existing element event listeners, and then calls bindAllElements to rescan the container and establish complete event listener relationships for the new element structure. This dynamic rebinding mechanism ensures that navigation functionality remains accurate and effective regardless of changes in form content.

[0071] In one implementation, the `useInputScan` composite function achieves seamless integration with the component lifecycle through Vue's `onMounted` and `onUnmounted` lifecycle hooks. After the component is mounted, the `onMounted` hook automatically performs initialization operations, including initial event binding and DOM listener startup. Before the component is unmounted, the `onUnmounted` hook performs a complete cleanup operation, including event unbinding, observer disconnection, and state reset, ensuring that no system resources are left behind after the component is destroyed.

[0072] 3. Basic Service Module

[0073] Implemented through utility functions in tools.js, this module provides fundamental technical services such as element scanning, position calculation, and availability detection. Employing a pure function design pattern, this module ensures that all functions are side-effect-free, predictable, and easily testable, providing a stable and reliable technical foundation for other modules.

[0074] In one implementation, the basic service module specifically includes the following core functions:

[0075] The getElementPosition function is used to calculate the absolute position and size information of an element in the document coordinate system;

[0076] The isFormElementUsable function is used to detect whether a form element is available and to filter hidden, disabled, and read-only elements.

[0077] The scanFormElements function scans all available form elements within a container and returns an array of objects containing their positions.

[0078] The FORM_ELEMENT_SELECTORS function is used to define standardized form element selector rule constants.

[0079] In one implementation, the `getElementPosition` function calculates element position based on the browser's standard API. This function first obtains the element's accurate position and size information relative to the viewport using the `getBoundingClientRect` API. The DOMRect object returned by this API contains key geometric properties such as the element's top, left, width, and height. Then, the function converts the viewport coordinates to an absolute coordinate system relative to the entire document by obtaining the page's vertical scroll offset (`window.pageYOffset` or `document.documentElement.scrollTop`) and horizontal scroll offset (`window.pageXOffset` or `document.documentElement.scrollLeft`). The technical advantage of this calculation method is its ability to accurately handle element positioning during page scrolling, ensuring that navigation algorithms can still perform calculations based on the correct element positions after the user scrolls the page. The position object returned by the function contains complete geometric information, providing a reliable data foundation for subsequent center point calculations and distance analysis.

[0080] In one implementation, the `isFormElementUsable` function performs multi-level element usability checks, ensuring that only truly interactive form elements participate in navigation calculations. The function employs a step-by-step filtering strategy: first, it verifies the element's visibility by checking the `display` and `visibility` style properties to exclude hidden elements; then, it verifies the element's interactivity by checking the `disabled` and `readOnly` properties to exclude non-editable elements; finally, it verifies the element's type matching, ensuring that the `type` attribute of the `INPUT` element conforms to the supported type range.

[0081] In one implementation, the `scanFormElements` function integrates multiple technical components such as selector querying, availability filtering, and position calculation to achieve a one-stop container element scanning service. The function first verifies the validity of the container parameters, then performs a DOM query based on `FORM_ELEMENT_SELECTORS` to obtain all candidate elements. It then converts the `NodeList` to a standard array using `Array.from`, followed by using the `filter` method in conjunction with the `isFormElementUsable` function to filter out usable elements. Finally, it uses the `map` method to call the `getElementPosition` function for each valid element to calculate its position information, forming a complete object array containing element references and geometric data. This comprehensive scanning strategy not only ensures the accuracy and completeness of the data but, more importantly, provides structured and standardized input data for the navigation algorithm, simplifying the complexity of the algorithm implementation.

[0082] In one implementation, the base service module defines standardized form element selector rules using the FORM_ELEMENT_SELECTORS constant. The current implementation focuses on text input elements (input[type="text"]), a specialized design that ensures the accuracy and controllability of navigation functionality. The selectors use standard CSS syntax, facilitating DOM element queries via the querySelectorAll API. This modular selector definition not only improves code maintainability but, more importantly, reserves architectural space for future feature expansion. Developers can easily modify the selector array to support more types of form elements without adjusting the implementation logic of other modules.

[0083] 4. Intelligent Spatial Navigation Algorithm Module

[0084] The find.js navigation algorithm is an intelligent direction navigation algorithm based on geometric center points. This algorithm transforms the element navigation problem in two-dimensional space into a mathematical calculation problem. Through the synergistic effect of multiple technical links such as geometric analysis, direction filtering, and weight scoring, it achieves navigation target selection that conforms to the user's spatial intuition.

[0085] In one implementation, the `getCenter` function determines the spatial center coordinates of an element based on geometric calculation principles. The function calculates the element's geometric center position in a two-dimensional coordinate system by adding the coordinates of its top-left corner to half its width and height. This center-point-based calculation method has significant technical advantages over traditional boundary coordinate comparison methods, more accurately reflecting the actual positional relationship of elements in visual space. The core significance of center-point calculation lies in eliminating the interference of element size differences on navigation decisions. In complex form layouts, the width and height of different input boxes often vary significantly. If distance calculations are based solely on element boundaries, navigation results may favor smaller elements. By using the geometric center point as the calculation benchmark, the algorithm can fairly evaluate all candidate elements, ensuring the impartiality and accuracy of navigation selection.

[0086] In one implementation, the `isInDirection` function implements strict directional candidate element filtering, determining whether a candidate element is located in the specified navigation direction by comparing the center coordinates of the current element and the candidate elements. The function uses a switch statement structure to implement the judgment logic for four directions: top requires the candidate element's Y-coordinate to be less than the current element, bottom requires the candidate element's Y-coordinate to be greater than the current element, left requires the candidate element's X-coordinate to be less than the current element, and right requires the candidate element's X-coordinate to be greater than the current element. This strict directional filtering mechanism ensures the accuracy of navigation directionality and avoids the "reverse jump" problem common in traditional algorithms. Only elements truly located in the specified direction are included in the candidate range, fundamentally guaranteeing the consistency between navigation behavior and user operation intentions.

[0087] In one implementation, the `calculateScore` function is the core innovation of the entire navigation algorithm, implementing an intelligent scoring mechanism based on multi-dimensional weights. The algorithm first calculates the X-axis and Y-axis offsets between the current element and the center point of candidate elements. Then, it uses a differentiated weight configuration strategy to perform a comprehensive score based on different navigation directions. The scoring algorithm employs differentiated weight configurations for different navigation directions: for vertical navigation (up and down), the weight of the Y-axis offset is set to 1.0, and the weight of the X-axis offset is set to 0.4, prioritizing the element with the closest vertical distance while considering horizontal alignment; for horizontal navigation (left and right), the weight of the X-axis offset is set to 1.0, and the weight of the Y-axis offset is set to 0.4, prioritizing the element with the closest horizontal distance. The `priority` term further optimizes the score through directional distance calculation, providing a more refined distinction for candidate elements.

[0088] In one implementation, the `findNextInDirection` general navigation function integrates all algorithm components, including element scanning, direction filtering, and score calculation, to achieve a complete navigation target selection process. The function first calls `scanFormElements` to scan all form elements within the container, locates the current element's position in the element list, and calculates its center point coordinates. Then, it uses the `filter` method in conjunction with the `isInDirection` function to obtain a set of candidate elements that meet the direction requirements. Finally, it iterates through the candidate elements to calculate scores and selects the element with the lowest score as the optimal navigation target. To simplify the interface, the module exports four dedicated direction navigation functions: `findNextOnTop`, `findNextOnBottom`, `findNextOnLeft`, and `findNextOnRight`. Each function is a specific direction wrapper around the `findNextInDirection` general function, providing a more intuitive and user-friendly API interface.

[0089] 5. Interactive control module

[0090] Primarily focused on event control in keyboard.js, this feature enables user interaction control and event handling, including cursor position awareness, dual-mode navigation control, and event lifecycle management.

[0091] In one implementation, the interaction control module first establishes a standardized mapping between arrow keys and navigation functions, directly associating keyboard event codes with corresponding navigation algorithm functions through the DIRECTION_ACTIONS object. This mapping mechanism not only simplifies event handling logic but, more importantly, provides a flexible configuration framework for subsequent functional expansion. The WeakSet data structure is used to maintain event binding state management, and the global variable boundElements tracks the set of elements with bound event listeners. The technical advantage of WeakSet lies in its weak reference characteristic; when an element is removed from the DOM, the corresponding binding record is automatically cleaned up, effectively preventing memory leaks.

[0092] In one implementation, the `isCursorAtBoundary` function implements cursor position awareness by accessing the `selectionStart` and `selectionEnd` properties of the HTML input element to obtain the cursor's position information. This function implements boundary judgment logic for different navigation directions: for left navigation, it checks if the cursor is at the beginning of the input box (`selectionStart === 0 && selectionEnd === 0`); for right navigation, it checks if the cursor is at the end of the input box (`selectionStart === value.length && selectionEnd === value.length`); for vertical navigation, due to the single-line nature of text input boxes, it directly returns `true` to allow vertical cross-element navigation. This cursor position awareness technology ensures compatibility between arrow key navigation and standard Web text editing behavior, activating cross-element navigation only when the cursor is at the corresponding boundary, thus avoiding functional conflicts with native keyboard operations.

[0093] In one implementation, the dual-mode navigation control includes a boundary-triggered mode and a forced navigation mode.

[0094] The boundary-triggered mode is implemented through the `handleInputBoundaryNavigation` function. This mode uses the `shouldHandleBoundaryNavigation` function to determine the trigger condition; the system will only activate cross-element navigation when the user presses an arrow key within a supported input field and the cursor is positioned on the corresponding boundary. This design maintains compatibility with standard web text editing behavior; when the user is editing text inside the input field, the arrow keys control cursor movement according to the native specification.

[0095] Forced navigation mode is implemented through the handleModifierKeyNavigation function. Users can force cross-element navigation at any cursor position by pressing the Ctrl key (Windows / Linux systems) or the Cmd key (macOS systems) in conjunction with the arrow keys, meeting the need for rapid navigation in specific business scenarios. This mode provides advanced users with greater operational flexibility, enabling rapid navigation between elements without waiting for the cursor to move to the boundary position.

[0096] In one implementation, the handleKeyboardEvent main control function unifies the scheduling and priority management of the two navigation modes. The function first attempts the processing logic of the boundary trigger mode. If this mode successfully handles the event (returns true), the processing flow ends; otherwise, it proceeds to the judgment and processing of the modifier key mode. This priority design ensures the intuitiveness of user operation: during normal text editing, the system prioritizes maintaining native keyboard behavior, activating navigation functions only under specific conditions.

[0097] In one implementation, the `bindKeyboardEvents` function manages the binding of element-level event listeners. The function first checks if the target element already exists in the `boundElements` collection to avoid event conflicts and performance penalties caused by duplicate bindings. It then creates an event handler function and stores it in the element's `_keydownHandler` property, ensuring each element has an independent event handler instance. Finally, it adds the element to the `boundElements` collection and binds the `keydown` event listener. The `unbindKeyboardEvents` function performs the corresponding cleanup operations. It obtains the event handler reference by accessing the element's `_keydownHandler` property, removes the event listener, and deletes the element record from the `boundElements` collection, ensuring event lifecycle management.

[0098] In this embodiment, the five functional modules realize the system operation through the designed data flow and collaboration mechanism.

[0099] During system startup, the data flow follows a top-down initialization pattern. First, the index.vue entry component establishes a container reference through the useInputScan composite function. Then, useInputScan calls the bindAllElements function in the onMounted lifecycle hook. This function scans the form elements in the container using the FORM_ELEMENT_SELECTORS selector from the tools.js module and calls the bindKeyboardEvents function from the keyboard.js module to establish an event listener relationship for each valid element. At the same time, it starts a MutationObserver instance to listen for changes in the DOM structure.

[0100] When user interaction triggers, the data flow shifts to a bottom-up event response pattern. When a user presses an arrow key on a form element, triggering the keydown event, the event handler in the keyboard.js module receives the event and determines the cursor position and modifier key state. Based on the result, it calls the corresponding navigation algorithm function in the find.js module. The navigation algorithm scans container elements and calculates the navigation target through the tools.js module, and the final result is returned to the keyboard.js module to perform the focus switching operation. In addition to this vertical data flow, there is also a horizontal collaborative relationship between the modules: the tools.js module provides shared basic data services for the find.js and keyboard.js modules; the algorithm output of the find.js module directly serves the navigation execution of the keyboard.js module; the useInputScan.js module coordinates the collaborative work of the keyboard.js and tools.js modules; and all modules jointly support the unified service interface provided by the index.vue entry component.

[0101] In this embodiment, the modular architecture design achieves the technical characteristics of high cohesion and low coupling. Each module has highly cohesive internal functions and clearly defined responsibilities. Modules interact through standardized function interfaces, reducing system coupling and improving maintainability. This design allows the basic tool function modules, core algorithm modules, event control modules, and composable function modules to be independently optimized and extended, providing an architectural foundation for the system's functional evolution. It not only ensures the current system's stability and reliability but also lays a solid technical foundation for the long-term development and continuous improvement of the technical solution, reflecting the practical standards of modern software engineering.

[0102] Based on in-depth technical analysis of the source code of the AutoNavigation component, this invention has the following outstanding advantages compared with the prior art:

[0103] 1. Technological breakthroughs in intelligent spatial navigation algorithms

[0104] This invention employs an intelligent navigation algorithm based on geometric center points. It calculates the spatial geometric center coordinates of elements using the `getCenter` function ({x: element.left + element.width / 2, y: element.top + element.height / 2}), significantly outperforming existing simplified comparison methods that rely solely on element boundary coordinates (offsetLeft, offsetTop). This technological innovation eliminates the interference of element size differences on navigation decisions, ensuring that input boxes of different sizes are fairly evaluated in complex form layouts, resulting in more accurate and reasonable navigation selection.

[0105] This invention implements a differentiated weight configuration strategy for different navigation directions in the `calculateScore` function: for vertical navigation (up and down), the Y-axis offset weight is set to 1.0 and the X-axis offset weight is set to 0.4; for horizontal navigation (left and right), the X-axis offset weight is set to 1.0 and the Y-axis offset weight is set to 0.4. This specially optimized weight mechanism ensures that the algorithm can intelligently select the target element that best matches the user's spatial intuition based on the navigation intent, and has a significant accuracy advantage compared to existing equal-weight or unweighted comparison methods.

[0106] The strict directional candidate element filtering mechanism implemented by the isInDirection function ensures that only elements that are truly located in the specified direction are included in the candidate range, fundamentally avoiding the "reverse jump" problem common in traditional algorithms and guaranteeing complete consistency between navigation behavior and user operation intentions.

[0107] 2. User Experience Innovation of Cursor Boundary Intelligent Perception Technology

[0108] This invention achieves precise detection of the cursor position within the input box using the isCursorAtBoundary function. It accurately identifies whether the cursor is at the beginning (selectionStart === 0) or end (selectionStart === value.length) of the text, resolving the technical challenge of conflicts between arrow key navigation and native text editing functionality commonly found in existing technologies. This cursor-aware technology ensures that cross-element navigation is activated only when the cursor is at the corresponding boundary, perfectly maintaining compatibility with standard Web text editing behavior.

[0109] The system employs two navigation triggering mechanisms: handleInputBoundaryNavigation and handleModifierKeyNavigation, providing flexible operation options for different user needs and usage scenarios. Boundary triggering mode maintains compatibility with Web standards, while the forced navigation mode offers advanced users the ability to quickly navigate to any location via Ctrl / Cmd + arrow keys. This design offers a user-friendly experience far exceeding the single triggering methods of existing technologies.

[0110] 3. Architectural advantages of dynamic content adaptive technology

[0111] This invention integrates a real-time DOM structure monitoring mechanism based on the MutationObserver API, which can automatically detect dynamic changes in form content (including element addition, deletion, and position adjustment) and execute a "clean-up then rebuild" event binding update strategy. This ensures that the navigation function remains effective in typical modern web application scenarios such as Ajax asynchronous loading, conditional field display and hiding, and dynamic form item addition and deletion. This adaptive capability completely solves the fundamental problem of static preset navigation relationships failing in dynamic content environments in existing technologies.

[0112] Compared to existing technologies that require developers to manually configure the top, bottom, left, and right adjacent relationships of each form element, this invention achieves fully automated element discovery and relationship construction. It automatically scans form elements within the container and calculates their spatial relationships using the `scanFormElements` function. Developers only need to use... <autonavigation>By wrapping the form area with a component, you can obtain complete directional navigation functionality, which greatly reduces the complexity of technical implementation and maintenance costs.

[0113] 4. Engineering advantages in memory management and performance optimization

[0114] This invention employs the WeakSet data structure to maintain event binding state management (boundElements). Leveraging its weak reference characteristic, it ensures that the corresponding binding records are automatically cleaned up when a DOM element is removed, effectively preventing memory leaks common in existing technologies. This design offers significant performance and stability advantages in modern single-page application (SPA) environments.

[0115] Complete event lifecycle management is implemented through the `bindKeyboardEvents` and `unbindKeyboardEvents` functions. Each element has an independent event handler instance (stored in the `_keydownHandler` property), ensuring accurate event binding and complete cleanup. When a component is destroyed, resource reclamation is automatically performed through Vue's `onUnmounted` hook, avoiding the performance impact caused by event listeners continuously residing in memory in existing technologies.

[0116] 5. The technological advancements of modern front-end architecture integration

[0117] This invention is built upon the Vue 3 Composition API technology stack, achieving seamless integration of reactive state management and lifecycle control through the useInputScan composer function. This modern architectural design not only aligns with current front-end technology trends but, more importantly, provides a component-based, reusable, and easily maintainable technical solution, significantly outperforming traditional methods that require extensive custom code implementation.

[0118] The technical implementation adopts a modular architecture design, decomposing the navigation logic into five independent modules: tools.js (basic tools), find.js (core algorithm), keyboard.js (event control), useInputScan.js (framework integration), and index.vue (entry component). This achieves a system with high cohesion and low coupling. This design not only ensures the stability of the current functionality but also provides a solid architectural foundation for subsequent technical expansion and feature enhancement. Developers can optimize or enhance specific functions without affecting other modules.

[0119] Example 2

[0120] Based on Embodiment 1, this embodiment proposes an implementation method for a Vue.js-based intelligent element sorting and focus switching control component.

[0121] Figure 2 This is a schematic diagram of the system initialization process of the present invention, as shown below. Figure 2 As shown, the system initialization process includes the following steps.

[0122] Step 11: When the AutoNavigation component (entry component module) is mounted to the DOM, Vue's onMounted lifecycle hook is triggered.

[0123] correspond Figure 2 The "Start Mounting Components" node in the template. At this stage, the AutoNavigation component obtains a reference to the container DOM element through the ref="containerRef" attribute in its template. This reference will be used later to scan and manipulate form elements within the container.

[0124] Step 12: The `onMounted` hook internally calls the `bindAllElements` method in the `useInputScan` composite function (control and coordination module). This initializes event binding and DOM listening.

[0125] correspond Figure 2 The "Initialize Event Bindings" node in the code snippet. The `bindAllElements` method first verifies the validity of the container reference, then scans all relevant elements within the container using the `querySelectorAll` API and a predefined form element selector (the `FORM_ELEMENT_SELECTORS` constant from the `tools.js` module). For each valid element found, the `bindKeyboardEvents` function (also within `useInputScan`) is called to establish event listener relationships and bind the `keydown` event handler function.

[0126] Step 13: In the onMounted hook, the useInputScan composite function starts the MutationObserver instance (part of the control coordination module).

[0127] correspond Figure 2 The "Start DOM Change Listening" node in the `` element. MutationObserver is configured to listen for changes in child elements within the container (including the addition, deletion, and repositioning of elements). When a change in the DOM structure is detected, the MutationObserver's callback function is triggered, executing the subsequent "clean up then rebuild" event binding update strategy.

[0128] Step 14: With the onMounted hook completed, the system initialization process ends.

[0129] correspond Figure 2 The "Initialization Complete" node indicates that the AutoNavigation component is ready to respond to user keyboard navigation actions, and all necessary initialization work has been completed.

[0130] Figure 3 This is a schematic diagram of the keyboard navigation interaction process of the present invention, as shown below. Figure 3 As shown, the keyboard navigation interaction process includes the following steps.

[0131] Step 21: The user presses the arrow keys (up, down, left, right) on the form element.

[0132] correspond Figure 3 The "User presses an arrow key" node in the form. This action triggers the keydown event, which is captured by the event listener previously bound to the form element.

[0133] Step 22: The event handler function (defined in the keyboard.js module) first detects the cursor position.

[0134] correspond Figure 3 The "Detect Cursor Position" node in the HTML input element determines whether the cursor is at the text boundary (start or end position) of the input box by accessing the selectionStart and selectionEnd attributes of the HTML input element (from the selectionStart / selectionEnd technical concept).

[0135] Step 23: If the cursor is at the text boundary, attempt boundary-triggered mode navigation.

[0136] correspond Figure 3 The "Boundary Trigger Mode Judgment" node is used. The `handleInputBoundaryNavigation` function (in the `keyboard.js` module) is called to determine whether cross-element navigation should be activated based on the cursor position and the pressed arrow key. If the condition is met, navigation calculation continues; otherwise, the process jumps to forced navigation mode judgment.

[0137] Step 24: If boundary trigger mode is not activated, check if a modifier key (Ctrl or Cmd) is pressed and try to force navigation mode.

[0138] correspond Figure 3 The "Force Navigation Mode Detection" node is used. The handleModifierKeyNavigation function (in the keyboard.js module) is called to detect whether the Ctrl (Windows / Linux) or Cmd (macOS) key is pressed, and combines this with the arrow keys to determine whether cross-element navigation should be forced.

[0139] Step 25: Based on the triggering mode (boundary triggering or forced navigation), call the corresponding navigation algorithm function (from the find.js module).

[0140] correspond Figure 3 The "Navigation Calculation and Target Selection" node is used in the `tools.js` module. The navigation algorithm first scans all form elements within the container (using the `scanFormElements` function), then calculates and selects the target element that best matches the navigation intent based on the arrow keys and the current element's position. This process involves complex logic such as geometric center point calculation, directional filtering, and weighted scoring (implemented using functions like `getCenter`, `isInDirection`, and `calculateScore` in the `find.js` module).

[0141] Step 26: After finding the target element, perform the focus switching operation.

[0142] correspond Figure 3 The "Focus Switching" node in the code. By calling the focus method of the target element, the focus is moved from the current element to the newly selected target element, completing the navigation process.

[0143] Step 27: With the focus switching operation completed, the keyboard navigation interaction process ends.

[0144] correspond Figure 3 The "Navigation Complete" node indicates that the user has successfully navigated to the new form element and can continue with data entry or other interactive operations.

[0145] It should be noted that although the steps in the above embodiments are described in a specific order, those skilled in the art will understand that in order to achieve the effects of the present invention, different steps do not necessarily have to be executed in such an order. They can be executed simultaneously (in parallel) or in other orders, and these variations are all within the scope of protection of the present invention.

[0146] Example 3

[0147] Based on Embodiment 1, this embodiment presents a Vue.js-based intelligent element sorting and focus switching control component. The system integration and operation process follows a three-stage lifecycle management model: initialization, runtime, and cleanup. Each stage has clearly defined technical responsibilities and execution procedures to ensure system stability and reliability.

[0148] 1. System startup process during the initialization phase

[0149] When the AutoNavigation component is mounted to the DOM, Vue's onMounted lifecycle hook automatically triggers the system initialization process. First, the bindAllElements function is executed. This function retrieves DOM elements through the container reference and calls scanFormElements to scan all form elements within the container. For each valid element, it calls bindKeyboardEvents to establish a keyboard event listener relationship. Then, a MutationObserver instance is started, configured to listen for changes in the DOM structure within the container, ensuring the system's adaptability to dynamic content.

[0150] 2. Event handling process during runtime

[0151] During normal system operation, when a user presses an arrow key on a form element, the `keydown` event is triggered, activating the event handling process. The `handleKeyboardEvent` main function first calls `handleInputBoundaryNavigation` to attempt boundary trigger mode processing. This function uses `shouldHandleBoundaryNavigation` to determine the trigger condition. If the condition is met, the corresponding navigation algorithm is called to calculate the target element, and finally, focus switching is achieved through `focusElement`. If the boundary trigger mode fails to handle the event, the system switches to the `handleModifierKeyNavigation` function for modifier key mode processing, detecting the Ctrl or Cmd key state and executing the corresponding forced navigation logic.

[0152] 3. Resource recovery mechanism during the cleanup phase

[0153] When a component is about to be unmounted, the `onUnmounted` lifecycle hook triggers a complete resource cleanup process. First, the `unbindAllElements` function is called to remove event listeners from all form elements, ensuring no dangling event bindings remain. Then, the `MutationObserver` connection is disconnected, stopping DOM change listening. Finally, the `boundElements` collection is cleared, completing the reclamation of all system resources.

[0154] In this embodiment, this lifecycle management mechanism ensures that resources are used reasonably and released in a timely manner during the creation, operation, and destruction of components, avoiding memory leaks and performance issues. Multiple stability assurance mechanisms are employed: modular code organization ensures functional independence and maintainability; reactive data management guarantees state consistency; event lifecycle management prevents resource leaks; and a dynamic DOM listening mechanism ensures adaptability to content changes. Simultaneously, the system's modular design provides an architectural foundation for subsequent functional expansion and technical optimization, allowing developers to add support for new element types, optimize navigation algorithms, or enhance the interactive experience without affecting the core logic.

[0155] Example 4

[0156] Based on the intelligent element sorting and focus switching control component implemented in Vue.js according to Embodiment 1, this embodiment presents a comparative case to verify its technical effect.

[0157] Comparative Case 1: Traditional Tab Key Linear Navigation vs. This Invention's Two-Dimensional Intelligent Navigation

[0158] Application scenario: Poultry breeding system breeding poultry registration form

[0159] This form contains a grid layout of basic information about breeding chickens, with 4 rows and 6 columns, and 24 input boxes arranged according to business logic:

[0160] Breeding chicken number, breed code, date of birth, paternal number, maternal number, and shed number.

[0161] Weight records, vaccination status, health rating, pedigree information, reproductive records, and remarks.

[0162] Egg production performance, feed consumption, growth rate, disease resistance, adaptability evaluation, quality grade

[0163] Stock status, transfer records, quarantine status, breeding plan, culling reasons, update time

[0164] Technical limitations of traditional Tab key navigation

[0165] When using traditional Tab navigation, focus switching strictly follows the linear traversal order of the DOM tree. Since HTML form elements are defined in the DOM from left to right and top to bottom, the Tab navigation path is: Breeder Number → Breed Code → Date of Birth → ... → Update Time. When a technician needs to jump from the "Breeder Number" in the first row to the "Weight Record" in the same column of the second row, they must press the Tab key five times, sequentially traversing "Breed Code," "Date of Birth," "Sire Number," "Madam Number," and "House Number" to reach the target location.

[0166] A more complicated situation arises when technicians need to compare the consistency of the input data "breeding chicken number JD001" and "weight record 2.8kg". The traditional navigation method forces them to perform 23 Tab key operations to return from "weight record" to "breeding chicken number", or interrupt keyboard operation to use mouse clicks to locate, which seriously affects the continuity and efficiency of data entry.

[0167] Technical advantages of the two-dimensional intelligent navigation of this invention

[0168] With the AutoNavigation component of this invention, technicians can use the arrow keys to achieve intuitive two-dimensional spatial navigation:

[0169] - Vertical navigation: In the "Chicken ID" input box, press the down arrow key to jump directly to the "Weight Record" section below, without going through any intermediate elements.

[0170] - Horizontal navigation: In the "Breeder Chicken Number" input box, press the right arrow key to jump directly to the "Breed Code" on the right.

[0171] - Diagonal navigation: First, press the right arrow key to navigate to "Vaccine Code", then press the down arrow key to navigate to "Vaccine Status". These two steps will allow you to navigate diagonally.

[0172] - Quick Backtrack: Use Ctrl + Arrow keys to force navigation at any cursor position, allowing for quick jumps between locations.

[0173] Efficiency comparison data

[0174] In a typical poultry breeding registration workflow:

[0175] • Traditional Tab key navigation: Completing a vertical check of "Breeder Chicken Number → Weight Record → Egg Production Performance → Inventory Status" requires 38 key presses.

[0176] • This invention's intelligent navigation: The same operation path requires only 3 directional key operations, improving efficiency by approximately 12.7 times.

[0177] Comparative Case 2: Traditional Hard-coding Implementation vs. This Invention's Automated Component Solution

[0178] Application scenario: Development of dynamic forms for broiler feed formulation management system

[0179] The system needs to dynamically display the corresponding nutrient composition ratio input boxes according to the different growth stages of broilers:

[0180] • Chick stage formula: Input boxes for 8 basic nutrients

[0181] • Growing-stage formula: 11 nutrient input boxes (plus 3 nutrient fortifiers)

[0182] • Egg-laying period formula: Input boxes for 12 special nutritional indicators

[0183] The technical complexity of traditional hard-coding implementation

[0184] To implement directional key navigation using traditional hard-coding methods, the development team needs to perform the following technical steps:

[0185] 1. Static Relationship Mapping Definition: Manually create an adjacent relationship mapping table for each nutrient input box, including top, bottom, left, and right. For the chick stage formula alone, 64 relationship mapping rules need to be defined (8 elements × 4 directions × 2 boundary cases).

[0186] 2. Event Binding Management: Manually bind keydown event listeners to each input field and write 200+ lines of core navigation logic code, including complex algorithms such as coordinate calculation, target selection, and boundary handling.

[0187] 3. Dynamic content adaptation: When a user switches growth stages, additional cleanup and rebuild logic must be written.

[0188] JavaScript

[0189] / / Pseudocode example

[0190] function switchToBreedingStage() {

[0191] / / Remove event listeners from the 8 elements in the chick stage.

[0192] removeEventListeners(chickenElements)

[0193] / / Hide the chick stage form

[0194] hideElements(chickenElements)

[0195] / / Display the growth period form

[0196] showElements(breedingElements)

[0197] / / Rebind events for 11 elements in the incubation period

[0198] bindEventListeners(breedingElements)

[0199] / / Rebuild navigation relationship mapping

[0200] rebuildNavigationMap(breedingElements)

[0201] }

[0202] 4. Maintenance costs: When business requirements change and the form layout needs to be adjusted, almost all navigation logic needs to be rewritten, resulting in extremely high code coupling.

[0203] Development time and cost statistics:

[0204] • Core algorithm development: 3 weeks

[0205] • Dynamic content adaptation: 2 weeks

[0206] • Testing and debugging: 1 week

[0207] • Total: 6 weeks development cycle

[0208] This invention explains some of the terms used in the present invention.

[0209] HTML: The international standard markup language for building web page content and structure. HTML uses tags to describe various elements in a web page, such as text, images, links, forms, etc. Each HTML tag has specific semantics and functions, and browsers use these tags to parse and render web page content. HTML documents are organized in a nested tree structure, forming the basic architecture of a web page. In this invention, HTML is mainly used to define the type, attributes, and initial state of form elements.

[0210] Web forms are interactive interface components on a webpage specifically designed for collecting, validating, and submitting user input data. Web forms consist of various form elements, including text input boxes, textareas, select boxes, radio buttons, and checkboxes. These form elements are defined using HTML markup language and presented as interactive controls that users can directly manipulate on the webpage. In enterprise applications, web forms are the primary carrier of core business functions such as data entry, user registration, and information retrieval; their interaction efficiency directly impacts user experience and work efficiency.

[0211] The DOM (Document Object Model) is a tree-like data structure that browsers build in memory after parsing HTML documents. The DOM represents each HTML element in a webpage as a node, and these nodes are organized into a hierarchical tree structure according to the nesting relationships within the HTML document. Each DOM node contains the element's attributes, content, and position information, and provides a standard programming interface for JavaScript code to access and manipulate. The linear traversal order of the DOM structure directly determines the path of traditional Tab key navigation, which is the fundamental reason for the limitations of existing navigation mechanisms.

[0212] Tab key focus switching: A standard keyboard navigation mechanism built into web browsers, allowing users to switch between focusable elements on a webpage by pressing the Tab key. This navigation strictly follows the linear traversal order of the DOM tree, starting with the first focusable element and moving focus to the next element sequentially until the last element, then looping back to the first. Tab key navigation is an important component of web accessibility standards, ensuring that keyboard users can fully operate webpage functions. However, in complex, multi-dimensional layouts, this linear navigation order often does not conform to the user's visual expectations.

[0213] The `tabindex` attribute of an HTML element defines the priority and order rules for focus switching. The `tabindex` attribute can be set to a positive integer, zero, or a negative integer to control the element's behavior in tab navigation. Positive integer values ​​indicate the element's specific position in the navigation sequence, with smaller values ​​indicating higher priority; `tabindex="0"` indicates that the element participates in normal tab navigation but is not specified in a particular order; negative integer values ​​indicate that the element can programmatically gain focus but does not participate in the tab navigation sequence. Developers can customize the tab navigation path by setting the `tabindex` attribute, but this method requires manually maintaining the order of all elements, which is extremely costly in dynamic content scenarios.

[0214] `getBoundingClientRect`: A method provided by the DOM API for retrieving element geometry information. It returns a `DOMRect` object containing the element's position and size relative to the viewport. The returned object includes properties such as `top`, `left`, `right`, `bottom`, `width`, and `height`, providing precise data for calculating the element's spatial position. This invention uses `getBoundingClientRect` to obtain the element's viewport-relative position and combines it with page scroll offsets to calculate the element's absolute position in the document coordinate system, providing an accurate spatial data foundation for navigation algorithms.

[0215] MutationObserver: A DOM change monitoring interface provided by the Web API, allowing developers to asynchronously observe changes in the DOM tree. MutationObserver can monitor various DOM operations such as adding or deleting child nodes, attribute changes, and text content changes. This invention utilizes MutationObserver to monitor DOM structure changes within the container. When the addition, deletion, or repositioning of form elements is detected, the event bindings are automatically recalculated and updated, ensuring the continued effectiveness of navigation functionality in dynamic content environments.

[0216] `selectionStart` and `selectionEnd` are attributes of HTML input elements, representing the start and end positions of the text selection area. These two attributes return the character index position of the cursor or selected text within the input box, providing a technical basis for accurate detection of the text editing state. This invention determines whether the cursor is located at the text boundary of the input box by detecting the values ​​of `selectionStart` and `selectionEnd`, achieving intelligent coordination between arrow key navigation and native text editing functions.

[0217] `offsetLeft` and `offsetTop` are read-only properties of HTML elements, representing the pixel offsets of an element relative to the left and top of its positioned parent element (`offsetParent`). These two properties are fundamental to CSS layout calculations, used to determine the element's position in the page coordinate system. In traditional arrow key navigation implementations, these basic position properties are often used in simple coordinate comparison algorithms. However, this method ignores important factors such as element size, visual distance, and layout context, resulting in navigation results that do not conform to the user's spatial intuition.

[0218] Event binding mechanism: The core mechanism of JavaScript event handling, it adds event listeners to DOM elements using the `addEventListener` method. Event binding establishes a connection between user actions and program logic, triggering the corresponding handler function when a specific event occurs. This invention binds a separate `keydown` event listener to each form element and ensures proper event cleanup through `removeEventListener`. Each element maintains an independent event handler instance, stored in the element's `_keydownHandler` property, achieving fine-grained event lifecycle management.

[0219] WeakSet data structure: A collection data type introduced in ES6, similar to Set but only able to store object references, and these references are weak references. Objects in a WeakSet that have no other references will be automatically cleaned up by the garbage collection mechanism, effectively preventing memory leaks. This invention uses WeakSet to manage a collection of elements bound to events. When a DOM element is removed, the corresponding record in the WeakSet is automatically cleaned up, ensuring the memory safety of event binding state management.

[0220] Pure function design pattern: A core concept of functional programming, referring to functions with no side effects whose output is entirely determined by the input. Pure functions offer advantages such as predictability, testability, and reusability. The tools.js module of this invention adopts the pure function design pattern; all utility functions do not depend on external state, produce no side effects, and return calculation results solely based on input parameters. This design ensures the reliability and testability of functions, providing a stable foundational service for the entire navigation system.

[0221] Modular architecture: a key design principle in modern JavaScript development, improving code maintainability and scalability by decomposing functionality into independent modules. Each module is responsible for a specific functional domain, and modules interact through clear interfaces. This invention uses ES6 modular syntax to decompose the navigation system into five functional modules: a basic tools module, a core algorithm module, an event control module, a framework integration module, and an entry component module, achieving separation of responsibilities and a highly cohesive yet loosely coupled architectural style.

[0222] Ajax asynchronous loading: Asynchronous JavaScript and XML (AJAX) technology allows web pages to exchange data with the server and dynamically update parts of the page without refreshing the entire page. Ajax enables modern web applications to adjust page content in real time based on user interaction, business logic, or changes in data state, including dynamically showing or hiding form fields, asynchronously loading new form items, and updating related options based on user selections. This dynamic content change is a key feature of modern web applications, but it also poses a significant challenge to statically configured navigation systems, as pre-defined navigation relationships cannot adapt to real-time layout changes.

[0223] Vue.js Composition API: A new way of organizing component logic introduced in the Vue 3 framework, replacing the traditional option-based API with a functional programming paradigm. The Composition API provides a `setup` function as the logical entry point for components and manages data state through reactive APIs such as `ref` and `reactive`. This invention is built upon the Composition API, encapsulating navigation logic through the `useInputScan` compositional function, achieving code modularity and reusability. This architectural design makes component logic clearer and easier to test and maintain.

[0224] Reactive reference (ref): A reactive data wrapper function provided by Vue.js, used to create mutable reactive reference objects. The ref function accepts an initial value and returns a reactive and mutable reference object containing a .value property pointing to its internal value. In this invention, containerRef is created using ref to store references to container DOM elements, ensuring that related dependency functions can automatically detect and perform update operations when container elements change.

[0225] Composable functions: A design pattern in the Vue.js Composition API, referring to reusable functions that encapsulate specific functional logic. Composable functions are typically named with "use" in the beginning, and internally utilize reactive APIs and lifecycle hooks, allowing logic to be shared across multiple components. The `useInputScan` function in this invention is a composable function that encapsulates complete navigation control logic, including container reference management, event binding control, and DOM change listening, providing a unified functional interface for components.

[0226] The technical solution of the present invention has been described above with reference to the preferred embodiments shown in the accompanying drawings. However, it will be readily understood by those skilled in the art that the scope of protection of the present invention is obviously not limited to these specific embodiments. Without departing from the principles of the present invention, those skilled in the art can make equivalent changes or substitutions to the relevant technical features, and the technical solutions after such changes or substitutions will all fall within the scope of protection of the present invention.< / autonavigation>

Claims

1. A component for intelligent element sorting and focus switching control implemented based on Vue.js, characterized in that, include, Entry component module: Provides external service interfaces for the navigation system. It is built using the Vue single-file component architecture pattern, contains a single div container element as the scope boundary of the navigation system, and receives form content through a slot mechanism; Control and Coordination Module: Built on the Vue 3 Composition API technology stack, it implements complete component lifecycle management, DOM structure listening, and event binding control; Basic service module: Provides foundational technologies for element scanning, location calculation, and availability detection for other modules; Intelligent spatial navigation algorithm module: The intelligent direction navigation algorithm based on geometric center point achieves navigation target selection through the synergistic effect of geometric analysis, direction filtering, and weight scoring; Interactive control module: This module controls events in keyboard.js, enabling cursor position awareness, dual-mode navigation control, and event lifecycle management. The control and coordination module is implemented through the useInputScan composite function. Inside the useInputScan composite function, a containerRef reactive reference is created through Vue's ref API to store the container DOM element passed by the entry component. The useInputScan composite function defines two methods: bindAllElements and unbindAllElements. In the intelligent spatial navigation algorithm module, the getCenter function calculates the geometric center position of an element in a two-dimensional coordinate system by adding the coordinates of the top-left corner of the element to half of its width and height. The `isInDirection` function determines whether a candidate element is located in the specified navigation direction by comparing the center coordinates of the current element with those of the candidate elements. It uses a switch statement structure to implement the judgment logic for four directions. The `calculateScore` function first calculates the X-axis and Y-axis offsets between the center points of the current element and the candidate elements. Then, it uses a differentiated weighting strategy to perform a comprehensive score based on different navigation directions. The scoring algorithm uses differentiated weighting for different navigation directions: for vertical navigation, the weight of the Y-axis offset is set to 1.0, and the weight of the X-axis offset is set to 0.4, prioritizing the element with the closest vertical distance while also considering horizontal alignment; for horizontal navigation, the weight of the X-axis offset is set to 1.0, and the weight of the Y-axis offset is set to 0.4, prioritizing the element with the closest horizontal distance. The `findNextInDirection` function first calls `scanFormElements` to scan all form elements within the container, locates the current element's position in the element list, and calculates its center coordinates. Then, it uses the `filter` method in conjunction with the `isInDirection` function to obtain a set of candidate elements that meet the direction requirements. Finally, it iterates through the candidate elements to calculate the score and selects the element with the lowest score as the optimal navigation target.

2. The element intelligent sorting and focus switching control component based on Vue.js as described in claim 1, characterized in that, The script logic of the entry component module includes the following two operations: The useInputScan composite function is introduced using ES6 module import syntax, which encapsulates the complete navigation logic implementation; By using destructuring assignment syntax to extract the containerRef reactive reference from the return value of the useInputScan function, a data binding relationship between the template and the logic is established.

3. The element intelligent sorting and focus switching control component based on Vue.js as described in claim 1, characterized in that, The bindAllElements method first verifies the validity of the container reference, then scans all relevant elements in the container based on the predefined form element selector using the querySelectorAll API, and finally calls the bindKeyboardEvents function for each element through forEach to establish event listener relationships. The `unbindAllElements` method first verifies the validity of the container reference, then scans all relevant elements within the container using the `querySelectorAllAPI` based on a predefined form element selector, and finally removes the event listeners for each element by calling the `unbindKeyboardEvents` function.

4. The element intelligent sorting and focus switching control component based on Vue.js as described in claim 1, characterized in that, The useInputScan combinator integrates a real-time DOM listening mechanism based on the MutationObserver API. During the component mounting phase, the system creates a MutationObserver instance and configures it to listen for changes in all child elements within the container. When MutationObserver detects a modification to the DOM structure, it first calls unbindAllElements to clean up the event listeners of all existing elements, and then calls bindAllElements to rescan the container and establish a complete event listening relationship for the new element structure.

5. The element intelligent sorting and focus switching control component based on Vue.js according to claim 1, characterized in that, The basic service module specifically includes: The getElementPosition function is used to calculate the absolute position and size information of an element in the document coordinate system; The isFormElementUsable function is used to detect whether a form element is available and to filter hidden, disabled, and read-only elements. The scanFormElements function scans all available form elements within a container and returns an array of objects containing their positions. The FORM_ELEMENT_SELECTORS function is used to define standardized form element selector rule constants.

6. The element intelligent sorting and focus switching control component based on Vue.js according to claim 1, characterized in that, The interactive control module first establishes a standardized mapping relationship between the arrow keys and navigation functions. It directly associates keyboard event codes with corresponding navigation algorithm functions through the DIRECTION_ACTIONS object, uses the WeakSet data structure to maintain event binding state management, and tracks the set of elements of the bound event listeners through the boundElements global variable.

7. The element intelligent sorting and focus switching control component based on Vue.js according to claim 1, characterized in that, In the interactive control module, dual-mode navigation control includes boundary-triggered mode and forced navigation mode. The boundary trigger mode is implemented through the handleInputBoundaryNavigation function, and the trigger condition is determined by the shouldHandleBoundaryNavigation function. The system will only activate the cross-element navigation function when the user presses the arrow key in the supported input box type and the cursor is located on the corresponding boundary. Forced navigation mode is implemented through the handleModifierKeyNavigation function. Users can force cross-element navigation at any cursor position by pressing the Ctrl key or Cmd key in combination with the arrow keys, which meets the need for quick navigation in specific business scenarios.

8. The element intelligent sorting and focus switching control component based on Vue.js according to claim 1, characterized in that, During system startup, the data flow begins with the index.vue entry component establishing a container reference via the useInputScan composite function. Then, in the onMounted lifecycle hook, useInputScan calls the bindAllElements function, which scans the form elements within the container using the FORM_ELEMENT_SELECTORS selector from the tools.js module. For each valid element, the bindKeyboardEvents function from the keyboard.js module is called to establish an event listener relationship. Simultaneously, a MutationObserver instance is started to listen for changes in the DOM structure.

9. The element intelligent sorting and focus switching control component based on Vue.js according to claim 1, characterized in that, When user interaction is triggered, the data flow first starts by the user pressing the arrow key on the form element to trigger the keydown event. The event handler of the keyboard.js module receives the event and judges the cursor position and modifier key state. Based on the judgment result, it calls the corresponding navigation algorithm function of the find.js module. The navigation algorithm scans the container elements through the tools.js module and calculates the navigation target. The final result is returned to the keyboard.js module to perform the focus switching operation.

Images