A method and system for compatibility of Firefox browser based on rich text input drop-down box
By defining a multi-level structure and a custom rendering method, the problems of dropdown expansion in Firefox and label insertion in rich text boxes were solved, thus achieving compatibility and simplifying operation of dropdowns in Firefox.
Patent Information
- Application Number
- CN202210830569.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-07-15
- Publication Date
- 2025-12-16
- Estimated Expiration
- 2042-07-15
AI Technical Summary
The existing technology cannot expand the dropdown list properly in Firefox, and there are compatibility issues when inserting tags and traversing elements in rich text boxes. In particular, the commercial component select2.js performs secondary rendering of the page's native tags, resulting in element redundancy and making it inconvenient to operate.
Define a multi-level structure for the dropdown list, including a first-level tag selectDiv, a second-level tag optionParent, and a third-level tag optionSon. Bind trigger events and listen for events, and use a custom rendering method to make the dropdown list compatible with Firefox browser and avoid secondary rendering.
It achieves compatibility of dropdown lists in Firefox, simplifies the operation of inserting tags into rich text boxes and traversing elements, reduces page element redundancy, and improves operation efficiency.
Smart Images
Figure CN115329228B_ABST
Abstract
Claims
1. A method for making a rich text input drop-down box compatible with Firefox browser, characterized in that, The application relates to a method for rendering a multi-level drop-down box. The method comprises the following steps: defining a multi-level structure of a drop-down box, initializing labels of each level, binding a trigger event and a listening event, setting a selected effect and a cancel selected effect of a last level label, setting attributes of a first level label, inserting labels into a rich text box after determining the width of the drop-down box, the multi-level structure being a three-level structure, the first level label being used for ensuring that all components are in the first level label, determining the width of the drop-down box and providing an anchor point for positioning of a child element, the second level label being used for controlling display and hiding of a drop-down box attribute label and determining the position of the drop-down box attribute label, and the last level label being used for displaying data. The rendering method of the first level label comprises the following steps: if a parameter multiple is true, a multiple attribute is added to the first level label; if a parameter value has a value and the parameter multiple is false, the value is assigned to the innerText of the first level label; if the parameter value has a value and the parameter multiple is true, the value without brackets is assigned to the title attribute and the innerText of the selectDiv; if a parameter type has a value, the type is assigned to the type attribute of the first level label; 2. The method for making a rich text input drop-down box compatible with Firefox browser according to claim 1, wherein, if a parameter valueType has a value, the type is assigned to the valueType attribute of the first level label. The binding method of the listening event comprises the following steps: if a click object is the first level label, the operations include canceling the selected effect of all drop-down boxes in the rich text, hiding all second level labels in the page, setting the selected effect or the unselected effect of the first level label, displaying the second level labels under the first level label and setting the z-index style of the parent object; if the click object is the last level label, the operations include canceling the selected effect of all drop-down boxes in the rich text, separately processing the multiple selection box type, setting the value and the innerHTML of the parent object of the last level label. The rendering method of the second level label comprises the following steps: a div label is inserted into an array, and the class attribute of the div label is set to display the second level label and the style is set to hide.
3. The method for making a rich text input drop-down box compatible with Firefox browser as claimed in claim 1, wherein, The rendering method of the last level label comprises the following steps: option arrays are traversed, the string width of each array value is calculated, the last level label is inserted into the array, and it is judged whether the parameter multiple is true; if the parameter multiple is true and the value without brackets is equal to the value of the option array, a blueBg is added to the class of the last level label, and a div with the class of selected is inserted; 4. The method for making a rich text input drop-down box compatible with Firefox browser as claimed in claim 1, wherein, if the parameter multiple is true and the value without brackets is not equal to the value of the option array, a div with the class of selected is inserted, and the style of the div is set to invisible.
5. The method for making a rich text input drop-down box compatible with Firefox browser as claimed in claim 1, wherein, If the parameter multiple is false and the value is equal to the value of the option array, add a blueBg to the class of optionSon; If the parameter multiple is false and the value is not equal to the value of the option array, do nothing.
6. The method for making a rich text input drop-down box compatible with Firefox browser as claimed in claim 1, wherein, The method for binding the triggering event is: The mounted function is used to bind the click event of the full label of the page; The beforeDestroy function is used to unbind the click event of the full label of the page.
7. A system for Firefox browser compatibility based on rich text input dropdown, employing a method for Firefox browser compatibility based on rich text input dropdown as claimed in any one of claims 1 to 6, characterized in that, It comprises: An event binding module configured to define the multi-level structure of the drop-down box, initialize each level of label, bind the triggering event and the listening event; A multi-select box control module configured to set the selected effect and the unselected effect of the last level of label, and set the attribute of the first level of label; A label insertion module configured to insert the label into the rich text box after determining the width of the drop-down box.
8. A computer-readable storage medium having stored thereon a computer program, characterized in that, The program is executed by the processor to implement the steps in the method for making the rich text input drop-down box compatible with the Firefox browser according to any one of claims 1-6.
9. A computer device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, The processor executes the program to implement the steps in the method for making the rich text input drop-down box compatible with the Firefox browser according to any one of claims 1-6.