CN118227250B

CN118227250B - Toolbar display method and device in page, computer equipment and storage medium

Info

Publication number: CN118227250B
Application number: CN202410653332.3A
Authority: CN
Inventors: 林水泉
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2024-05-24
Filing date: 2024-05-24
Publication date: 2024-09-20
Anticipated expiration: 2044-05-24
Also published as: CN118227250A

Abstract

The application relates to a toolbar display method, device, computer equipment and storage medium in a page. The method comprises the following steps: when the components of the page are mounted, binding a toolbar display event and a display trigger event of the virtual input tool through the webpage rendering component; responding to a focusing event triggered on a page and aiming at an input area, rendering and displaying a virtual input tool through a native rendering component, and pushing and displaying a generation prompt of the triggering event; the method comprises the steps that through a webpage rendering component, under the condition that a prompt for generating a display trigger event is received and a toolbar is configured in an input area, first toolbar state information is acquired and output to a native rendering component, the toolbar display event is triggered, and a toolbar display instruction is output to the native rendering component; and rendering and displaying the toolbar of the input area according to the first toolbar state information by a native rendering component in response to the toolbar display instruction. The method can stably display the toolbar.

Description

Toolbar display method and device in page, computer equipment and storage medium

Technical Field

The present application relates to the field of computer technology, and in particular, to a toolbar display method, apparatus, computer device, storage medium and computer program product in a page.

Background

With the development of computer technology, more and more applications emerge, and many services can be conveniently performed on-line through the applications, so that the interaction experience between users and the applications is also more and more emphasized.

In the conventional technology, a Web technology (Web technology) is generally used for realizing overall rendering and interaction in a main rendering area of an application program of a mobile terminal, when an input box is displayed on a page of the application program of the mobile terminal, a virtual keyboard of the mobile terminal is evoked when the input box is focused on the input area for input interaction, and in order to improve the input efficiency and experience effect of a user, a toolbar for drawing auxiliary input by using a Web rendering component is fixed above the virtual keyboard through absolute positioning, and the user can realize a specific interaction effect by clicking a button of the toolbar.

However, in the conventional method, the application program of the mobile terminal is usually a multi-input box application, multiple input class elements exist in the page of the application program, and when the input box acquires and switches the focus, the lifting action of the virtual keyboard and the moving action of the system native whole WebView can cause abnormal flicker and jitter in positioning when the toolbar is used, so that the toolbar cannot be stably displayed.

Disclosure of Invention

In view of the foregoing, it is desirable to provide a toolbar display method, apparatus, computer device, computer-readable storage medium, and computer program product that are capable of stably displaying a toolbar in a page.

In a first aspect, the present application provides a toolbar display method in a page. The method comprises the following steps:

When the components of the page are mounted and the native rendering component meets the toolbar rendering conditions, binding a toolbar display event with a display trigger event of a virtual input tool through the webpage rendering component, and adding monitoring of the display trigger event;

Responding to a focusing event triggered on the page and aiming at an input area, rendering and displaying a virtual input tool through the native rendering component, and pushing a generation prompt of the display triggering event to the webpage rendering component;

Acquiring first toolbar state information through the webpage rendering component under the condition that a generating prompt of the display triggering event is received and the input area is configured with a toolbar, outputting the first toolbar state information to the native rendering component, triggering the toolbar display event and outputting a toolbar display instruction to the native rendering component;

And responding to the toolbar display instruction through the native rendering component, and rendering and displaying the toolbar of the input area according to the first toolbar state information.

In a second aspect, the application further provides a toolbar display device in the page. The device comprises:

the event adding module is used for binding a toolbar display event with a display trigger event of the virtual input tool through the webpage rendering component when the component of the page is mounted and the native rendering component meets the toolbar rendering condition, and adding monitoring of the display trigger event;

the focusing response module is used for responding to the focusing event which is triggered on the page and aims at the input area, rendering and displaying a virtual input tool through the native rendering component, and pushing a generation prompt of the display triggering event to the webpage rendering component;

The toolbar display control module is used for acquiring first toolbar state information through the webpage rendering component under the condition that the webpage rendering component receives a prompt for generating the display trigger event and the input area is provided with a toolbar, outputting the first toolbar state information to the native rendering component, triggering the toolbar display event and outputting a toolbar display instruction to the native rendering component;

And the toolbar display module is used for responding to the toolbar display instruction through the native rendering component, rendering and displaying the toolbar of the input area according to the first toolbar state information.

In a third aspect, the present application also provides a computer device. The computer device comprises a memory storing a computer program and a processor which when executing the computer program performs the steps of:

In a fourth aspect, the present application also provides a computer-readable storage medium. The computer readable storage medium having stored thereon a computer program which when executed by a processor performs the steps of:

In a fifth aspect, the present application also provides a computer program product. The computer program product comprises a computer program which, when executed by a processor, implements the steps of:

According to the toolbar display method, device, computer equipment, storage medium and computer program product in the page, when the components of the page are mounted and the native rendering component meets toolbar rendering conditions, the toolbar display event is bound with the display trigger event of the virtual input tool through the webpage rendering component, monitoring of the display trigger event is added, triggering of the toolbar display event can be achieved by monitoring the display trigger event of the virtual input tool, interaction is achieved through displaying the virtual input tool when a focusing event aiming at an input area is generated, the display trigger event is generated to inform the webpage rendering component, the webpage rendering component can be enabled to know that the display trigger event is generated, and then first toolbar state information is obtained when the toolbar is configured in the input area, the first toolbar state information is output to the native rendering component, the toolbar display event is triggered, and a toolbar display instruction is output to the native rendering component, so that the native rendering component can render and display a toolbar of the area according to the first toolbar state information by responding to the toolbar display instruction. The whole process controls the logic of displaying the toolbar through the webpage rendering component and renders the toolbar through the native rendering component, so that the logic of displaying the toolbar can be separated, the webpage rendering component controls the logic of displaying the toolbar and controls the native rendering component to render and display the toolbar in the process of rendering and displaying the virtual input tool, and stable display of the toolbar can be realized.

Drawings

FIG. 1 is an application environment diagram of a toolbar display method in a page in one embodiment;

FIG. 2 is a flow diagram of a toolbar display method in a page in one embodiment;

FIG. 3 is a schematic diagram of a virtual input tool in one embodiment;

FIG. 4 is a schematic diagram of an input area in one embodiment;

FIG. 5 is a schematic diagram of a visual indicator in one embodiment;

FIG. 6 is a schematic layout of virtual input tools and toolbars in one embodiment;

FIG. 7 is a diagram of a toolbar of an input area in one embodiment;

FIG. 8 is a schematic diagram of a toolbar of an input area in another embodiment;

FIG. 9 is a schematic diagram of the design of an interface for setting buttons in a toolbar in one embodiment;

FIG. 10 is a schematic diagram of a first toolbar state update interface in one implementation;

FIG. 11 is a schematic diagram of a toolbar display control interface according to an embodiment;

FIG. 12 is a schematic diagram of detecting a run environment of a native rendering component in one implementation;

FIG. 13 is a schematic diagram of a design of a toolbar button-click interface in one embodiment;

FIG. 14 is a diagram of a component offloaded event in response to a page in one embodiment;

FIG. 15 is a logic diagram of a toolbar rendering implemented by a web page rendering component in one embodiment;

FIG. 16 is a schematic diagram of tool bar positioning drift in one embodiment;

FIG. 17 is a schematic diagram of cursor drift in one embodiment;

FIG. 18 is a diagram of a toolbar assembly architecture in one embodiment;

FIG. 19 is a process flow diagram of a toolbar display method according to an embodiment;

FIG. 20 is a block diagram of a toolbar display device in a page in one embodiment;

Fig. 21 is an internal structural view of a computer device in one embodiment.

Detailed Description

The present application will be described in further detail with reference to the drawings and examples, in order to make the objects, technical solutions and advantages of the present application more apparent. It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the scope of the application.

The toolbar display method in the page provided by the embodiment of the application can be applied to an application environment shown in fig. 1. As shown in fig. 1, the terminal 102 includes a native rendering component 104 and a web page rendering component 106, where the native rendering component 104 may also be referred to as a rendering component based on a client native technology, where a client refers to a client based on a mobile operating system, and the mobile operating system may specifically be an IOS system or an android system. The web page rendering component 106 refers to a component that renders content using web page technology (e.g., HTML, CSS, and JavaScript). These components are embedded into the native application by controls such as WebView (core view class). When the components of the page are mounted and the native rendering component meets the toolbar rendering condition, binding a toolbar display event with a display trigger event of the virtual input tool through the webpage rendering component 106, adding monitoring of the display trigger event, responding to a focusing event triggered on the page and aiming at the input area, rendering and displaying the virtual input tool through the native rendering component 104, pushing a generation prompt of the display trigger event to the webpage rendering component 106, acquiring first toolbar state information through the webpage rendering component 106 when the generation prompt of the display trigger event is received and the input area is configured with a toolbar, outputting the first toolbar state information to the native rendering component 104, triggering the toolbar display event, outputting a toolbar display instruction to the native rendering component 104, and responding to the toolbar display instruction through the native rendering component 104, and rendering and displaying the toolbar of the input area according to the first toolbar state information.

The terminal 102 may be, but not limited to, various desktop computers, notebook computers, smart phones, tablet computers, internet of things devices, and portable wearable devices, where the internet of things devices may be smart speakers, smart televisions, smart air conditioners, smart vehicle devices, and the like. The portable wearable device may be a smart watch, smart bracelet, headset, or the like.

In one embodiment, as shown in fig. 2, a toolbar display method in a page is provided, and the method can be executed by a terminal or a server alone or cooperatively. In the embodiment of the application, the method is applied to the terminal for illustration, and comprises the following steps:

Step 202, when the components of the page are mounted and the native rendering component meets the toolbar rendering condition, binding the toolbar display event with the display trigger event of the virtual input tool through the webpage rendering component, and adding monitoring of the display trigger event.

Where in an application, a page refers to a particular screen or view of a user's interactions with the application. It typically contains user interface elements, data, and functions that allow a user to perform specific tasks or access specific information. For example, the page in this embodiment may specifically be an online document editing page displayed in an application program. For example, the online document may be a collection table, and the page in this embodiment may be a collection table editing page displayed in the application program.

Wherein, the mounted component of the page means that the component of the page has been successfully added to the DOM (Document Object Model ) and can interact with the user, and in this embodiment, the component of the page means a component based on webpage technology, namely, a webpage rendering component. For example, the component of the page may specifically be a reaction component, and then the component of the page being mounted means that the reaction component has been successfully added to the DOM and can interact with the user. The act component is a reusable code block for building a user interface, i.e., in this embodiment, a reusable code block for building a page.

The native rendering component may also be referred to as a rendering component based on a client native technology, where a client refers to a client based on a mobile operating system, and the mobile operating system may specifically be an IOS system or an android system. The toolbar rendering condition refers to a condition that a toolbar is rendered by using a native rendering component, and it can be understood that the toolbar rendered by the native rendering component is a native rendering toolbar, and correspondingly, the toolbar rendered by the webpage rendering component is a browser rendering toolbar. The toolbar rendering conditions may be configured according to the actual application scenario, and are not specifically limited herein in this embodiment.

The web page rendering component refers to a component that renders content using web page technology (such as HTML, CSS, and JavaScript). These components are embedded into the native application by controls such as WebView (core view class). The toolbar refers to an input toolbar for assisting user interaction, and the toolbar comprises a plurality of buttons for assisting a user in realizing shortcut operation, for example, the buttons of the toolbar can be particularly buttons for assisting the user in realizing up-down switching of an input area. For another example, the buttons of the toolbar may be specifically buttons that assist the user in implementing the configuration of the content of the input area. For example, the input area content configuration herein may specifically be collection of table title settings, addition of pictures, addition of links, and the like. For another example, a button of the toolbar may specifically be a button that assists the user in collapsing the virtual input tool. Toolbar display events refer to events that indicate that a toolbar is displayed on a page.

Where virtual input tools refer to input methods that can be created on a terminal by an application program that allows a user to input text and data without a physical keyboard or other input device. For example, the virtual input tool may be a virtual keyboard, a speech recognition tool, a handwriting input tool, or the like. The virtual keyboard is a keyboard displayed on a screen of the terminal, and a user can input with a finger or a stylus. Speech recognition tools refer to tools that convert speech into text, allowing a user to enter text by speaking. Handwriting input tools refer to tools that allow a user to write or draw on a screen to input text or symbols. For example, the virtual input tool may be a virtual keyboard as shown in fig. 3. The display trigger event of the virtual input tool refers to an event in which the display of the virtual input tool is triggered, indicating that the virtual input tool is to start displaying. For example, the display trigger event of the virtual input tool may specifically be a virtual input tool up event, i.e. an event that the virtual input tool is hidden from display.

Specifically, the components of the page are mounted, the components representing the page are successfully added to the DOM, the page is displayed in the application program of the terminal, the webpage rendering component of the terminal can detect whether the native rendering component meets the toolbar rendering conditions or not under the condition that the components of the page are mounted, when the native rendering component meets the toolbar rendering conditions, the native rendering component can be used for rendering the toolbar, the webpage rendering component can bind a toolbar display event with a display trigger event of the virtual input tool, and monitoring of the display trigger event is added, so that when the display trigger event of the virtual input tool is monitored, the display trigger event of the toolbar is triggered, and the native rendering component is indicated to conduct toolbar rendering and display.

In step 204, in response to the focus event for the input area triggered on the page, the virtual input tool is rendered and displayed by the native rendering component, and the generation prompt of the display trigger event is pushed to the web page rendering component.

The input area refers to an area in a page in which text, data, or other information can be input. For example, the input area may specifically refer to an input box in which text, data, or other information may be input in a page. For example, when the page is a collection table editing page, the input area may specifically refer to an area in the collection table editing page in which a description of a title may be input.

The focus event for the input area refers to an event triggered when the input area obtains focus, and when the user clicks or otherwise moves the focus to the input area, the focus event is triggered, which generally means that the user can now start inputting data. For example, as shown in fig. 4, when the page is a collection table editing page, the input area may specifically refer to an area in the collection table editing page where a description of a question can be input (i.e., an area where a question is input) (including an area where a question is input 01, an area where a question is input 02, an area where a question is input 03, and an area where a question is input 04, as shown in fig. 4), or an area in the collection table editing page where a description is input (an area where a description of an input can be added, and a picture and a link can be added), and as shown in fig. 4, the collection table editing page further includes an area where a question is set, such as whether a question has to be filled in, where when the user moves the focus to any input area, the input area where the focus is obtained will generally have a visual indicator (as shown in fig. 5, i.e., a vertical line indicating the input position of the user in the input area), and when the input area obtains the focus, the focus event is triggered for the input area.

Specifically, when a focusing event triggered on a page and aiming at an input area is detected, the terminal responds to the focusing event, and renders and displays a virtual input tool through a native rendering component, so that a user can interact through the virtual input tool, input text, data and the like, and push a prompt for generating a display triggering event to a webpage rendering component so as to inform the webpage rendering component that the display triggering event is triggered.

Step 206, through the web page rendering component, when receiving the generation prompt of the display trigger event and the input area is configured with the toolbar, acquiring the first toolbar state information, outputting the first toolbar state information to the native rendering component, triggering the toolbar display event, and outputting the toolbar display instruction to the native rendering component.

Wherein the first toolbar state information refers to data for defining and configuring toolbar appearance and behavior, and generally comprises layout and design information, function and behavior information and the like. The layout and design information comprises the position and the size of the tool bar, the arrangement of the buttons in the tool bar, the color scheme and the style of the tool bar, and the function and behavior information comprises the function and the purpose of each button, the arrangement sequence of the buttons and the like. Toolbar display instructions refer to instructions that instruct a native rendering component to render a native rendering toolbar and display.

Specifically, when the toolbar display event is bound with the display trigger event of the virtual input tool and the monitoring of the display trigger event is added, the webpage rendering component triggers the toolbar display event by monitoring the display trigger event of the virtual input tool, and receives a generation prompt of the display trigger event, which is equivalent to monitoring the display trigger event of the virtual input tool, so after receiving the generation prompt of the display trigger event, the webpage rendering component firstly judges whether the toolbar is configured in the input area, and when the toolbar is configured in the input area, acquires the first toolbar state information, outputs the first toolbar state information to the native rendering component, triggers the toolbar display event and outputs a toolbar display instruction to the native rendering component to instruct the native rendering component to render the native rendering toolbar and display.

It should be noted that, because the virtual input tool is rendered and displayed by the native rendering component, the web page rendering component can monitor the display trigger event of the virtual input tool as long as the native rendering component pushes the generation prompt of the display trigger event to the web page rendering component when the native rendering component starts to render and display the virtual input tool.

Step 208, rendering, by the native rendering component, and displaying the toolbar of the input area according to the first toolbar state information in response to the toolbar display instruction.

Specifically, when receiving the toolbar display instruction, the native rendering component renders and displays a toolbar of the input area according to the first toolbar state information in response to the toolbar display instruction. It should be noted that, because the prompt for generating the display trigger event is pushed to the web page rendering component when the native rendering component starts to render and display the virtual input tool, when the input area is configured with the toolbar, the native rendering component receives the toolbar display instruction output by the web page rendering component before the virtual input tool is completely displayed, so that the effect of synchronous display of the virtual input tool and the toolbar of the input area can be achieved during actual display. In a particular application, the page may be as shown in FIG. 6, a virtual input tool (which may be a virtual keyboard as shown in FIG. 6 in particular) may be displayed at the bottom of the page, and the toolbar of the input area is displayed above the virtual input tool.

According to the toolbar display method in the page, when the components of the page are mounted and the native rendering component meets toolbar rendering conditions, the toolbar display event is bound with the display trigger event of the virtual input tool through the webpage rendering component, the display trigger event of the virtual input tool is monitored, triggering of the toolbar display event can be achieved, when a focusing event aiming at an input area is generated, interaction is achieved through the display virtual input tool, the display trigger event is generated to inform the webpage rendering component, the webpage rendering component can know that the display trigger event is generated, and then under the condition that the toolbar is configured in the input area, first toolbar state information is obtained, the first toolbar state information is output to the native rendering component, the toolbar display event is triggered, a toolbar display instruction is output to the native rendering component, and the native rendering component can render and display a toolbar of the input area according to the first toolbar state information through responding to the toolbar display instruction. The whole process controls the logic of displaying the toolbar through the webpage rendering component and renders the toolbar through the native rendering component, so that the logic of displaying the toolbar can be separated, the webpage rendering component controls the logic of displaying the toolbar and controls the native rendering component to render and display the toolbar in the process of rendering and displaying the virtual input tool, and stable display of the toolbar can be realized.

In one embodiment, the toolbar display method in the page further includes:

acquiring a region identifier of an input region after receiving a generation prompt of a display trigger event through a webpage rendering component;

when the area identifier exists in the preconfigured focusing area identifier list, the input area is determined to be configured with a toolbar.

The region identifier of the input region refers to an identifier for identifying the input region. For example, the area identifier of the input area may be specifically an identifier for identifying the input area. The region identifier of the input region may specifically be a character string for identifying the input region, for example. The preconfigured list of focus area identifiers refers to a preconfigured list of area identifiers including the input area configured with the toolbar, i.e. the input area indicated by the area identifier present in the list of focus area identifiers is configured with the toolbar.

Specifically, after receiving a prompt for generating a display trigger event, the webpage rendering component acquires an area identifier of an input area, queries a preset focusing area identifier list according to the area identifier of the input area to determine whether the area identifier exists in the focusing area identifier list, determines that a toolbar is configured in the input area indicated by the area identifier when the area identifier exists in the focusing area identifier list, and acquires first toolbar state information under the condition that the toolbar is configured in the input area, so as to output the first toolbar state information to the native rendering component, and instructs the native rendering component to display the toolbar.

In a specific application, if a toolbar is configured in an input area for each input area in a page in an application program, toolbar state information corresponding to the input area is pre-configured, so that when the input area is determined to be configured with the toolbar, a webpage rendering component can acquire toolbar state information pre-configured for the input area, namely, first toolbar state information, directly according to an area identifier of the input area.

In a specific application, the application program state has a region identifier-state information table, the correspondence between the region identifier and the toolbar state information can be stored in the region identifier-state information table, and the data in the region identifier-state information table can be in the form of region identifier 1-toolbar state information 1, region identifier 2-toolbar state information 2, region identifier 3-toolbar state information 3 and … … region identifier n-toolbar state information n.

It will be appreciated that the toolbar state information for different input areas may not be identical, and that if the toolbar state information is different, the form of the toolbar displayed may be different. For example, if the input area is a title description input area, the toolbar of the input area may be in the form of fig. 7, and include a button for switching the input area up and down (a button for switching the input area up is Λ as shown in fig. 7, a button for switching the input area down is v as shown in fig. 7), and a button for storing a virtual input tool (a virtual keyboard as shown in fig. 7). The buttons of the up-down switch input area are used for realizing the up-switch input area (the area where the title name is requested to be input is shown in fig. 7) and the down-switch input area (the area where the 01-request input problem is shown in fig. 7), and the buttons of the stow virtual input tool are used for realizing the stow virtual input tool. For another example, if the input area is a question description input area (the area where the cursor is located as shown in fig. 8), the toolbar form of the input area may include a button for switching the input area up and down, a button for question placement, and a button for storing the virtual input tool as shown in fig. 8. The button for question configuration is used for quickly configuring the question description (namely, the questions).

In this embodiment, by acquiring the region identifier of the input region, the accurate determination of whether the toolbar is configured in the input region can be implemented by using the region identifier and the preconfigured focusing region identifier list, and then the first toolbar state information can be acquired for further processing only when the toolbar is configured in the input region. The whole process can realize controllable display of the toolbar of the input area.

In one embodiment, when a prompt for generating a display trigger event is received by a web page rendering component and a toolbar is configured in an input area, acquiring first toolbar state information, outputting the first toolbar state information to a native rendering component, triggering a toolbar display event, and outputting a toolbar display instruction to the native rendering component comprises:

acquiring first toolbar state information through a webpage rendering component under the condition that a generating prompt of a display trigger event is received and a toolbar is configured in an input area, calling a first toolbar state updating interface provided by a native rendering component, and outputting the first toolbar state information to the native rendering component;

And triggering a toolbar display event through the webpage rendering component, calling a toolbar display control interface provided by the native rendering component, and outputting a toolbar display instruction to the native rendering component.

The first toolbar state update interface is an interface provided by the native rendering component for updating toolbar state information, namely an interface for updating button states in the toolbar, and the first toolbar state information can be output to the native rendering component by calling the first toolbar state update interface. The toolbar display control interface is an interface for controlling the display of the toolbar, which is provided by the native rendering component, and the toolbar display instruction can be output to the native rendering component by calling the toolbar display control interface. In addition, the native rendering component is provided with an interface for setting buttons in the toolbar, and by calling the interface for setting buttons in the toolbar, the buttons in the toolbar that can be rendered by the native rendering component can be configured.

Specifically, after receiving a prompt for generating a display trigger event, the web page rendering component first determines whether a toolbar is configured in an input area, acquires first toolbar state information under the condition that the toolbar is configured in the input area, invokes a first toolbar state update interface provided by the native rendering component, and outputs the first toolbar state information to the native rendering component so that the native rendering component can update button states in the toolbar, and under the condition that the first toolbar state information is output to the native rendering component, the web page rendering component triggers a toolbar display event, invokes a toolbar display control interface provided by the native rendering component, and outputs a toolbar display instruction to the native rendering component so as to instruct the native rendering component to respond to the toolbar display instruction and render and display the toolbar according to the button states in the toolbar indicated by the first toolbar state information.

In a specific application, the native rendering component is provided with an interface to set buttons in the toolbar, a first toolbar state update interface, and a toolbar display control interface. The interface for setting the buttons in the toolbar is called, the native rendering component can be instructed to set the buttons in the toolbar, the first toolbar state information can be output to the native rendering component by calling the first toolbar state updating interface, the native rendering component is instructed to update the states of the buttons in the toolbar, and the native rendering component can be instructed to display or hide the toolbar by calling the toolbar display control interface.

Wherein the states of the buttons in the toolbar include an enabled state in which the buttons in the toolbar can be displayed and a disabled state in which the buttons in the toolbar are not displayed. Further, the interface of the buttons in the setting toolbar may be designed as shown in fig. 9, and setting of the left button, the middle button, and the right button may be performed by calling the interface with a function of the setting toolbar button (xxx in [ xxx ] beside the left button, the middle button, and the right button in fig. 9 represents specific setting parameters, respectively). The first toolbar state update interface may be designed as shown in fig. 10, and updating the states of the left button, the middle button, and the right button may be performed by calling the interface with a function that sets the states of the buttons in the toolbar (xxx in [ xxx ] beside the left button, the middle button, and the right button in fig. 10 respectively represent specific state parameters).

The design of the toolbar display control interface can be as shown in fig. 11, and the toolbar display control can be realized by using a function for displaying or hiding the toolbar by calling the interface, namely, a toolbar display instruction or a toolbar hiding instruction is output to the native rendering component. It will be appreciated that the toolbar display instruction and toolbar hide instruction differ in the field value that characterizes the display control field. For example, as shown in fig. 11, the toolbar display instruction that is output may be in the form of a display control field (show in fig. 11): characterizing the field value of the display toolbar (true in fig. 11), the corresponding toolbar hide instruction output may be in the form of a display control field (show in fig. 11): the representation does not display the field value (false corresponding to true in FIG. 11) of the toolbar.

In this embodiment, the first toolbar state information can be output to the native rendering component by calling the first toolbar state update interface provided by the native rendering component, and the toolbar display control interface provided by the native rendering component can be called by calling the trigger toolbar display event to output a toolbar display instruction to the native rendering component so as to instruct the native rendering component to perform toolbar rendering and display. In the whole process, data transmission can be carried out between the original rendering component and an interface provided by the original rendering component.

In one embodiment, the toolbar display method in the page further includes:

Under the condition that the components of the page are mounted, calling a component mounted method through the webpage rendering component;

calling a toolbar creation interface through a component mounted method, and detecting an operating environment of a native rendering component for toolbar rendering to obtain an operating environment detection result;

And when the running environment detection result is that the running environment is ready, determining that the native rendering component meets the toolbar rendering condition.

Wherein the component mounted method (also referred to as componentDidMount) is a lifecycle method in React that is invoked immediately after the component is first rendered into the DOM, i.e., immediately after the component has been mounted into the DOM. The toolbar creation interface refers to an interface that creates a toolbar. The running environment for toolbar rendering refers to the running environment that the native rendering component needs to satisfy when the toolbar rendering is implemented by the native rendering component. It is understood that the operating environment that the native rendering component needs to satisfy herein specifically refers to that the component version of the native rendering component satisfies the toolbar rendering version requirement, the toolbar rendering function of the native rendering component is in an enabled state, and so on. The runtime environment is ready means that the native rendering component can be used to implement toolbar rendering.

Specifically, under the condition that the components of the page are mounted, the webpage rendering component can immediately call a component mounted method, a toolbar creation interface is called through the component mounted method, the running environment of the native rendering component for toolbar rendering is detected through the toolbar creation interface, a running environment detection result is obtained, when the running environment detection result is that the running environment is ready, it is determined that the native rendering component can be used for realizing toolbar rendering, namely, the native rendering component meets toolbar rendering conditions.

In a specific application, the toolbar creation interface may detect the running environment of the native rendering component for toolbar rendering by calling a detection existence method to obtain a running environment detection result, then as shown in fig. 12, in the life cycle of a page, when the component of the page is mounted, the web page rendering component may immediately call the component mounted method, call the toolbar creation interface by the component mounted method, call a detection existence method by using the toolbar creation interface, detect the running environment of the native rendering component for toolbar rendering by using the detection existence method, return the running environment detection result, and when the running environment detection result is that the running environment is ready, it may be determined that the native rendering component satisfies the toolbar rendering condition.

Further, as shown in fig. 12, in the case that the native rendering component satisfies the toolbar rendering condition, an event adding method is triggered and invoked, a toolbar display event is bound with a display trigger event of the virtual input tool, monitoring of the display trigger event is added, a toolbar hidden event is bound with a hidden trigger event of the virtual input tool, monitoring of the hidden trigger event is added, and whether the toolbar appears or not is judged by monitoring the display trigger event and the hidden trigger event of the virtual input tool.

In this embodiment, when the component of the page is mounted, the component mounted method is called by the webpage rendering component, and the calling of the toolbar creation interface can be realized by the component mounted method, so that the detection of the running environment of the native rendering component for toolbar rendering can be realized, and the running environment detection result is obtained, thereby realizing the accurate judgment of whether the native rendering component meets the toolbar rendering condition or not by using the running environment detection result, and determining that the native rendering component meets the toolbar rendering condition when the running environment detection result is that the running environment is ready.

In one embodiment, invoking the toolbar creation interface to detect a running environment of the native rendering component for toolbar rendering, the obtaining a running environment detection result comprising:

Calling a toolbar creation interface, and acquiring component configuration information of a native rendering component under the condition that the native rendering component exists; the component configuration information comprises component version information and toolbar rendering configuration information;

When the component version information meets the toolbar rendering version requirement and the toolbar rendering configuration information characterizes that the toolbar rendering function is in an enabling state, determining that the running environment detection result is that the running environment is ready.

The component configuration information is information for describing the configuration of the native rendering component, and comprises component version information and toolbar rendering configuration information, wherein the component version information is used for describing the version of the native rendering component, and the toolbar rendering configuration information is used for describing whether the toolbar rendering function of the native rendering component is in an enabled state. Toolbar rendering version requirements refer to requirements that component versions of native rendering components need to meet when implementing toolbar rendering with native rendering components. For example, the toolbar rendering version requirement may specifically be that the component version of the native rendering component must be the target component version, or not lower than the target component version, where the target component version may be configured according to the actual application scenario.

Specifically, a toolbar creation interface is called, when a native rendering component exists, component configuration information of the native rendering component can be obtained, the component configuration information comprises component version information and toolbar rendering configuration information, when the component version information and the toolbar rendering configuration information are obtained, whether the component version information meets the toolbar rendering version requirement or not needs to be judged, whether a toolbar rendering function is in an enabling state or not is judged according to the toolbar rendering configuration information, and when the component version information meets the toolbar rendering version requirement and the toolbar rendering configuration information characterizes the toolbar rendering function to be in the enabling state, it is determined that an operation environment detection result is that the operation environment is ready.

In a specific application, if the function of implementing toolbar rendering by the native rendering component is the online gray function, it is necessary to further detect whether the user logging in the application program is a gray user, and if the user is a gray user, it is determined that the running environment detection result is that the running environment is ready. In a specific application, the account of the user logged into the application may be used to determine whether the user is a gray user, i.e. when the account of the user belongs to a pre-configured gray user account, the user is determined to be a gray user.

In this embodiment, by acquiring the component configuration information of the native rendering component, accurate detection of the running environment of the native rendering component for toolbar rendering can be achieved by using component version information and toolbar rendering configuration information in the component configuration information.

In one embodiment, the toolbar display method in the page further includes:

In response to a triggering operation of a button in a toolbar of the input area, outputting, by the native rendering component, a button identification indicated by the triggering operation to the webpage rendering component;

and rendering and displaying the page by the webpage rendering component according to the page updating mode indicated by the button identification.

Wherein the button identification refers to an identification of a button in a toolbar for identifying an input area. For example, the button identification may specifically be an identifier for identifying a button in a toolbar of the input area. The button identification may specifically be a string of buttons in a toolbar for identifying input areas, for example. The page update mode refers to a mode of updating a page, for example, the page update mode may specifically be to update a focused input area, display an input content configuration page, and the like.

Specifically, in the case of a toolbar in which an input area is displayed, the user can realize interaction with a page by triggering a triggering operation of a button in the toolbar for the input area. In the case that the user triggers the triggering operation of the button in the toolbar of the input area, responding to the triggering operation of the button in the toolbar of the input area, the native rendering component outputs a button identifier indicated by the triggering operation to the webpage rendering component so as to indicate the webpage rendering component to render and display the webpage according to the page updating mode indicated by the button identifier.

In a specific application, under the condition that a toolbar of an input area is displayed, the native rendering component monitors triggering operation of buttons in the toolbar of the input area, acquires a button identifier indicated by the triggering operation when the triggering operation of the buttons in the toolbar of the input area is monitored, calls a toolbar button clicking interface, and outputs the button identifier indicated by the triggering operation to the webpage rendering component.

In a specific application, the design of the toolbar button clicking interface may be as shown in fig. 13, and in the case that the button identifier indicated by the triggering operation is obtained, the native rendering component may output the button identifier indicated by the triggering operation to the web page rendering component by calling a function of executing the toolbar button clicking in the toolbar button clicking interface, so as to instruct the web page rendering component to execute the callback event based on the button identifier, that is, render and display the page according to the page updating manner indicated by the button identifier. In this embodiment, as shown in fig. 13, the callback is called execEventCallback (a scheme for solving communication between the native rendering component and the web page rendering component in the application program may be understood as a communication protocol).

In this embodiment, by responding to the triggering operation of the button in the toolbar for the input area, the button identifier indicated by the triggering operation can be output to the webpage rendering component through the native rendering component, and then the webpage can be rendered and displayed through the webpage rendering component according to the webpage updating mode indicated by the button identifier, so that interaction with the webpage is realized.

In one embodiment, rendering and displaying, by the web page rendering component, pages in a page update manner indicated by the button identification includes:

when the page updating mode indicated by the button identification is to update the focused input area, determining, by the webpage rendering component, the area position of the updated focused input area based on toolbar size information acquired from the native rendering component;

based on the updated region position of the focused input region, the page is rendered and displayed.

Wherein updating the focused input area refers to transferring focus from the currently focused input area to another input area. For example, updating the focused input area may specifically be transferring focus from the currently focused input area to the last input area. For another example, updating the focused input area may specifically be transferring focus from the currently focused input area to the next input area. Toolbar size information is used to describe the size of the toolbar of the input area. For example, the toolbar size information may specifically be height information of a toolbar of the input area.

Specifically, when a user triggers a trigger operation for switching the input area up and down, which indicates that the page update mode indicated by the button identifier is to update the focused input area, the focused input area needs to be updated, the web page rendering component determines the updated area position of the focused input area based on the toolbar size information acquired from the native rendering component, and renders and displays the page based on the updated area position of the focused input area. It will be appreciated that the rendering and display of the page herein is primarily an update of a cursor indicating a focused input area.

In this embodiment, when the focused input area needs to be updated, the area position of the focused input area is determined based on the toolbar size information, and then the page is rendered and displayed, so that the situation that the toolbar of the input area affects the display of the page because the size of the toolbar is not known when the focused input area is updated can be avoided.

For example, when updating the focused input area to transition from the currently focused input area to the underlying input area, the size of the toolbar is not known, which may result in a cursor indicating the focused input area being overlaid by the toolbar of the input area.

when the page updating mode indicated by the button identification is to display an input content configuration page, acquiring page configuration information of the input content configuration page to be displayed through a webpage rendering component, performing defocusing processing on the focused input area, rendering the input content configuration page and displaying the input content configuration page.

The input content configuration page is a page for configuring the content of the input area. For example, the content configuration of the input area can be specifically set for collecting the title, adding the picture, adding the link, and the like, and the quick configuration of the content of the input area can be realized by inputting the content configuration page.

Specifically, the buttons in the toolbar include buttons configured by the content of the input area, when a user triggers a triggering operation of the buttons configured by the content of the input area, the page updating mode indicated by the button identifier is indicated to be displaying of an input content configuration page, the webpage rendering component obtains page configuration information of the input content configuration page to be displayed, performs defocusing processing on the focused input area, and renders and displays the input content configuration page.

It can be understood that, because the native rendering component and the webpage rendering component are mutually independent, when the user triggers the triggering operation for the button in the toolbar, if the triggering operation is not for the button for switching the input area up and down, the webpage rendering component cannot automatically lose focus, so that when the webpage rendering component determines that the page updating mode indicated by the button identifier is to display the configuration page of the input content, the focused input area is required to be subjected to focus losing processing, so that the problem that the input area cannot be automatically defocused is avoided.

In one embodiment, the toolbar display method in the page further includes:

binding a toolbar hidden event with a hidden triggering event of a virtual input tool through the webpage rendering component under the condition that the components of the webpage are mounted and the native rendering component meets the toolbar rendering condition, and adding monitoring of the hidden triggering event;

In response to a defocusing event triggered on a page and aiming at an input area, cancelling display of a virtual input tool through a native rendering component, and pushing a generation prompt of a hidden triggering event to a webpage rendering component;

Triggering a toolbar hiding event after receiving a generating prompt of the hiding triggering event through a webpage rendering component, and outputting a toolbar hiding instruction to a native rendering component;

The toolbar of the display input area is canceled in response to the toolbar hiding instruction through the native rendering component.

Wherein, the toolbar hiding event refers to an event indicating that the toolbar is hidden on the page. A hide trigger event of a virtual input tool refers to an event that the hide of the virtual input tool is triggered, indicating that the virtual input tool will begin to hide. For example, the hidden triggering event of the virtual input tool may specifically be a virtual input tool descent event, i.e. an event of the virtual input tool from display to hiding. An out-of-focus event for an input region refers to an event that is triggered when the input region loses focus, which is triggered when a user clicks or otherwise moves focus to an area outside of the input region.

Specifically, when the components of the page are mounted and the native rendering component meets the toolbar rendering condition, the web page rendering component binds the toolbar hidden event with the hidden triggering event of the virtual input tool, and adds monitoring of the hidden triggering event, so that when the hidden triggering event of the virtual input tool is monitored, the hidden event of the toolbar is triggered to instruct the native rendering component to cancel displaying the toolbar. When the out-of-focus event triggered on the page and aiming at the input area is detected, the terminal responds to the out-of-focus event, the virtual input tool is canceled to be displayed through the original rendering component, and a generation prompt of the hidden triggering event is pushed to the webpage rendering component so as to inform the webpage rendering component that the hidden triggering event is triggered.

In a specific application, under the condition that a toolbar hiding event is bound with a hiding triggering event of a virtual input tool and monitoring of the hiding triggering event is added, a webpage rendering component triggers the toolbar hiding event by monitoring the hiding triggering event of the virtual input tool, and receives a generation prompt of the hiding triggering event, which is equivalent to monitoring of the hiding triggering event of the virtual input tool, so that after receiving the generation prompt of the hiding triggering event, the webpage rendering component triggers the toolbar hiding event, invokes a toolbar display control interface provided by a native rendering component, outputs a toolbar hiding instruction to the native rendering component to instruct the native rendering component, and responds to the toolbar hiding instruction to cancel the toolbar displaying an input area.

It should be noted that, because the virtual input tool is rendered and displayed by the native rendering component, as long as the native rendering component starts to cancel displaying the virtual input tool, the native rendering component pushes the generation prompt of the hidden triggering event to the web page rendering component, and the web page rendering component can monitor the hidden triggering event of the virtual input tool.

In this embodiment, triggering of the toolbar hiding event can be achieved by using a hiding triggering event of the monitoring virtual input tool, when an out-of-focus event for the input area is generated, interaction is achieved through the hiding virtual input tool, and the webpage rendering component is informed that the hiding triggering event is generated, so that the webpage rendering component can know that the hiding triggering event is generated and triggers the toolbar hiding event, and further, a toolbar hiding instruction can be output to the native rendering component in response to the toolbar hiding event, so that the native rendering component can cancel displaying the toolbar by responding to the toolbar hiding instruction. The whole process controls the logic of hiding the toolbar through the webpage rendering component and cancels the display toolbar through the native rendering component, so that the logic of displaying and rendering the toolbar can be separated, the webpage rendering component controls the logic of displaying the toolbar and the native rendering component to cancel the display toolbar, and stable cancellation of displaying the toolbar can be realized.

In one embodiment, the toolbar display method in the page further includes:

responding to an unloading event of a component of a page, and calling a component unloading method through a webpage rendering component;

and calling a toolbar unloading interface through a component unloading method, and under the condition that the native rendering component meets the toolbar rendering condition, releasing the binding of the toolbar display event and the display trigger event and releasing the monitoring of the display trigger event.

Wherein, the component uninstalled event refers to an event triggered when the component is removed from the DOM, and the component in this embodiment refers to a component based on web page technology, that is, a web page rendering component. The component offload method (also referred to as componentWillUnmount) is a lifecycle method in act that is invoked when a component is removed from the DOM.

Specifically, when a component of a page is removed from the DOM, an unloading event of the component of the page is triggered, and in response to the unloading event of the component of the page, the webpage rendering component invokes a component unloading method, invokes a toolbar unloading interface through the component unloading method, and releases the binding of a toolbar display event and a display trigger event and the monitoring of the display trigger event under the condition that the native rendering component meets toolbar rendering conditions through the toolbar unloading interface.

In a specific application, as shown in fig. 14, when a component of a page is removed from the DOM, the component of the page is triggered to be unloaded, in response to the component of the page being unloaded, the web page rendering component invokes a component unloading method, invokes a toolbar unloading interface, invokes a detect presence method through the toolbar unloading interface, invokes an event removal method when the detect presence method determines that the native rendering component satisfies a toolbar rendering condition, unbinds a toolbar display event and a display trigger event, invokes an event monitoring removal interface when unbinds the toolbar display event and the display trigger event, and unbinds the display trigger event.

In this embodiment, in response to an unloading event of a component of a page, a component unloading method is called through a web page rendering component, and a toolbar unloading interface is called through the component unloading method, so that the binding of a toolbar display event and a display trigger event is released and the monitoring of the display trigger event is released, so as to ensure that the component is completely unloaded.

In one embodiment, the toolbar display method in the page further includes:

when the components of the page are mounted and the native rendering components do not meet the toolbar rendering conditions, creating toolbar instances through the webpage rendering components;

Rendering and displaying, by a native rendering component, a virtual input tool in response to a focus event for an input region triggered at a page;

And when the toolbar is configured in the input area, calling a second toolbar state updating interface through the webpage rendering component, acquiring second toolbar state information, calling a toolbar display interface, and rendering and displaying the toolbar of the input area based on the second toolbar state information and the toolbar instance.

Where toolbar instances refer to specific toolbar instances created by the web page rendering component, the created toolbar instances may be applied to facilitate input operations at the page, with their own states, methods, and events. The second toolbar state information refers to information for describing the state of the buttons in the toolbar. For example, the second toolbar state information may specifically be information describing whether a button in the toolbar is enabled. It will be appreciated that the status of buttons in a toolbar instance may be updated by updating the second toolbar status information.

Specifically, when the component of the page is mounted, the webpage rendering component can immediately call a component mounted method, a toolbar creation interface is called through the component mounted method, an operation environment of the native rendering component for toolbar rendering is detected through the toolbar creation interface to obtain an operation environment detection result, when the operation environment detection result is that the operation environment is not ready, the native rendering component does not meet toolbar rendering conditions, toolbar rendering needs to be carried out through the webpage rendering component, at this time, the webpage rendering component can call a toolbar creation event, a toolbar instance is created, monitoring of a focusing event for an input area is added, when the focusing event for the input area is triggered on the page, the native rendering component can render and display a virtual input tool in response to the focusing event for the input area triggered on the page, and when the toolbar is configured in the input area, the webpage rendering component can call a second toolbar state update interface, obtain second toolbar state information and call a toolbar display interface, and render and display the toolbar of the input area based on the second toolbar state information and the toolbar instance.

In a specific application, while adding monitoring of a focus event for an input area, a web page rendering component adds monitoring of an out-of-focus event for an input area, when the out-of-focus event for the input area is triggered on a page, in response to the out-of-focus event for the input area triggered on the page, a native rendering component cancels displaying a virtual input tool, and in the case that a toolbar is configured for the input area, the web page rendering component cancels displaying the toolbar for the input area. Meanwhile, the webpage rendering component can also monitor the scrolling event of the page, when the scrolling event of the page is triggered on the page, the native rendering component can cancel to display the virtual input tool in response to the scrolling event of the page triggered on the page, and when the input area is configured with the tool bar, the webpage rendering component can cancel to display the tool bar of the input area. When the components of the page are unloaded, responding to the unloaded events of the components of the page, the webpage rendering component can call a component unloading method, and the monitoring removal interface is called through the component unloading method to remove the monitoring of the focusing events of the input area, the defocusing events of the input area and the rolling events of the page.

In one particular application, a logic diagram for implementing toolbar rendering by a web page rendering component may be as shown in FIG. 15. In the life cycle of the page, under the condition that the components of the page are mounted, the webpage rendering component can immediately call a component mounted method, a toolbar creation interface is called through the component mounted method, the running environment of the original rendering component for toolbar rendering is detected through the toolbar creation interface to obtain a running environment detection result, when the running environment detection result is that the running environment is not ready, the original rendering component does not meet toolbar rendering conditions, toolbar rendering needs to be carried out through the webpage rendering component, at the moment, the webpage rendering component can call a toolbar creation event (not shown in the figure), a toolbar instance is created, monitoring of focusing events for an input area, defocusing events for the input area and scrolling events of the page is added, when the focusing events for the input area are triggered on the page, the webpage rendering component can call a second toolbar state update interface to obtain second toolbar state information and call a toolbar display interface under the condition that the toolbar is configured in the input area, and the toolbar rendering of the input area is displayed based on the second toolbar state information and the toolbar instance. When an out-of-focus event for an input region is triggered on a page, the web page rendering component cancels a toolbar that displays the input region in response to the out-of-focus event for the input region triggered on the page. When a page-on-page scroll event is triggered, the web page rendering component cancels the toolbar displaying the input area in response to the page-on-page scroll event. When the components of the page are unloaded, responding to the unloaded events of the components of the page, the webpage rendering component can call a component unloading method, and the monitoring removal interface is called through the component unloading method to remove the monitoring of the focusing events of the input area, the defocusing events of the input area and the rolling events of the page.

In this embodiment, when the component of the page is mounted and the native rendering component does not meet the toolbar rendering condition, the rendering of the toolbar is realized through the webpage rendering component, and the stable display toolbar is performed.

It can be appreciated that, in the conventional method, an application program of the mobile terminal is usually a multi-input box application, multiple input class elements (such as input (used for creating a single input control), textarea labels (used for creating multiple lines of text input controls), contenteditable elements (HTML (Hyper Text Markup Language, hypertext markup language) elements having contenteditable properties and allowing a user to edit directly in the content thereof)) exist in a page of the application program, and when the input box acquires and switches the focus, the lifting action of the virtual keyboard itself and the moving action of the WebView (web page view) which is the whole native to the system can cause abnormal flicker and shake of the toolbar to be positioned when the toolbar is used, so that the problem that the toolbar cannot be stably displayed can be caused, and the user interaction experience effect is greatly affected.

Specifically, the conventional approach suffers from the following interaction drawbacks: firstly, tool bars drift in positioning and shake back and forth when focusing different focuses, and marks drift when pages slide; secondly, a toolbar needs to be hidden when scrolling the page; thirdly, the problem that the toolbar blocks the cursor often occurs (it is to be noted that in order to be out of the way, the web page technology performs a plurality of scrolling operations on textarea and contenteditable elements, such as scrollintoview or scrollBy, and the problem of flickering and bouncing is amplified; fourth, for android system, the virtual keyboard can be immediately lowered when out of focus, the virtual keyboard can be immediately raised when focusing, the height of the page is changed, and the toolbar can naturally flash.

In one embodiment, the interaction drawbacks are illustrated by taking the page of the present application as a collection table edit page, as shown in fig. 16, where toolbar positioning shifts when focusing on different focuses are not completely fixed above the virtual keyboard. As shown in fig. 17, the cursor may drift as the page slides and is not displayed in the input area, wherein the cursor is indicated by a bolded vertical line in fig. 17.

Based on the method, the toolbar display method in the page of the stable display toolbar is provided, and input interaction and optimization operation interaction aiming at an input area can be completed under the condition that the input area exists in the page of the terminal by the toolbar assistance user. For example, by the toolbar display method in the page, the toolbar can assist a user in completing the input interaction effect and the optimized operation interaction of the document at the terminal, and stability, usability and usability of the document are ensured. For example, the document herein may be a collection table, and the page in the present application is a collection table editing page.

It should be noted that, the conventional call chain for implementing the overall rendering and interaction method by using Web technology (Web page technology) is to strongly bind the process of focusing/defocusing an input area, displaying/hiding an element, and rendering the element by using Web page rendering element, which has a relatively long process and causes a certain time overhead, and the toolbar is rendered by using Web page rendering element and has problems of height, hierarchy and position among Web page elements, which may finally cause the defects of drifting and shaking of toolbar element, cursor drifting indicating the input area and being above the toolbar. The toolbar display method in the page can well avoid the problems.

In one embodiment, the toolbar component architecture diagram related to the toolbar display method in the page of the present application can be shown in fig. 18, it can be seen from fig. 18 that the toolbar part is responsible for drawing by the native rendering component, and the displaying and updating logic is completed by the webpage rendering component, where the native rendering component and the webpage rendering component are completed by JS (JavaScript, a programming language) interface and execEventCallBack (a scheme for solving communication between the native rendering component and the webpage rendering component in an application program, which can be understood as a communication protocol), so that the logic of rendering and displaying can be separated, for the webpage rendering component, only the display and the data updating are needed to be concerned, and the toolbar drawn by the native rendering component has more stable performance and usability, and greatly improves the interactive experience of the user.

In one embodiment, as shown in fig. 19, which is a schematic process flow diagram of the toolbar display method in the page of the present application, as shown in fig. 19, in the toolbar display method in the page of the present application, displaying the native rendering toolbar by using the native rendering component is based on the web page technology, and the way of displaying the web page rendering toolbar by using the web page rendering component is reserved, so that the web page rendering component is used for performing the spam processing under the condition that the native rendering component does not meet the toolbar rendering condition, and the interaction of the user is ensured. That is, after the toolbar creation interface is called, whether the native rendering toolbar needs to be displayed by using the native rendering component or the webpage rendering component is used for displaying the webpage rendering toolbar is selected according to a running environment detection result obtained by running environment detection of the native rendering component. As shown in fig. 19, when the native rendering component is used to display the native rendering toolbar, the same component loading and unloading is performed in the page lifecycles componentDidMounted and componentWillUnmount, and there is a detection presence method to detect the running environment of the native rendering component for toolbar rendering, i.e., determine whether the running environment of the native rendering component for toolbar rendering is ready. As shown in fig. 19, in the processing logic of the native rendering component, the focused event (calling the toolbar display interface in fig. 19)/out-of-focus event (calling the toolbar hidden interface in fig. 19) of the input area is unbinding, the event adding method is called, monitoring of the display trigger event and the hidden trigger event of the virtual input tool is added, whether the toolbar appears or not is judged by monitoring the display trigger event and the hidden trigger event of the virtual input tool, when the component of the page is triggered by the unload event, the toolbar unloading interface is called to unload, namely, the existence detecting method is called first to detect the running environment of the native rendering component for toolbar rendering, the event removing method is called when the running environment of the native rendering component for toolbar rendering is determined to be ready, the binding of the display trigger event and the hidden trigger event and the binding of the hidden trigger event of the toolbar are released, and the event monitoring removing interface is called, and the monitoring of the display trigger event and the hidden trigger event is released.

It will be appreciated that the toolbar display method in the page of the present application can understand the toolbar as a part of the original rather than a part of the webpage, separate the toolbar appearance logic and the toolbar button update logic through unbinding, and can reduce part of the computing performance consumption, and relevant event binding can be performed after the creation is successful, including a display trigger event and a hidden trigger event for monitoring the virtual input tool, a trigger operation for a button in the toolbar of the input area (in particular, the event of detecting clicking a button callback to a webpage rendering component) and the like.

In one embodiment, a specific description will be given below of a toolbar display method in a page of the present application, in which component loading is performed when a component of the page is already installed, component unloading is performed in response to a component unloading event of the page, and the method involves several parts, such as toolbar display, toolbar cancel display, and response to a trigger operation for a button in the toolbar.

When the components of the page are mounted, the webpage rendering component calls a component mounted method, a toolbar creation interface is called through the component mounted method, when the native rendering component exists, component configuration information of the native rendering component, which comprises component version information and toolbar rendering configuration information, is obtained, when the component version information meets the toolbar rendering version requirement and the toolbar rendering configuration information characterizes a toolbar rendering function to be in an enabling state, it is determined that a running environment detection result is that the running environment is ready, when the running environment detection result is that the running environment is ready, it is determined that the native rendering component meets toolbar rendering conditions, the webpage rendering component binds a toolbar display event with a display triggering event of a virtual input tool, binds a toolbar hiding event with a hiding triggering event of the virtual input tool, and monitoring of the display triggering event and the hiding triggering event is added.

Under the condition of completing event binding and event addition monitoring, if a focusing event aiming at an input area is generated on a page, responding to the focusing event aiming at the input area triggered on the page, rendering and displaying a virtual input tool by the native rendering component, and pushing a prompt for generating a triggering event to the webpage rendering component. The webpage rendering component is used for triggering a toolbar display event after receiving a prompt for generating the display trigger event, responding to the toolbar display event, acquiring an area identifier of an input area, determining that the input area is configured with a toolbar when the area identifier exists in a preconfigured focusing area identifier list, acquiring first toolbar state information under the condition that the input area is configured with the toolbar, calling a first toolbar state update interface provided by the native rendering component, outputting the first toolbar state information to the native rendering component, triggering the toolbar display event, calling a toolbar display control interface provided by the native rendering component, outputting a toolbar display instruction to the native rendering component to instruct the native rendering component, and responding to the toolbar display instruction, rendering and displaying the toolbar of the input area according to the first toolbar state information.

Under the condition of completing event binding and event addition monitoring, if an out-of-focus event aiming at an input area is generated on a page, responding to the out-of-focus event aiming at the input area triggered on the page, the native rendering component can cancel to display a virtual input tool and push a generation prompt of a hidden triggering event to the webpage rendering component. And the webpage rendering component triggers a toolbar hiding event after receiving a prompt for generating the hiding triggering event, invokes a toolbar display control interface provided by the native rendering component, and outputs a toolbar hiding instruction to the native rendering component, so that the native rendering component responds to the toolbar hiding instruction to cancel the toolbar of the display input area.

Under the condition that the component of the page is generated by the uninstalled event, the webpage rendering component can call a component uninstalled method in response to the component uninstalled event of the page, and call a toolbar uninstalled interface through the component uninstalled method, under the condition that the native rendering component meets toolbar rendering conditions, the binding of the toolbar display event and the display triggering event and the binding of the toolbar hidden event and the hidden triggering event are released, and the monitoring of the display triggering event and the hidden triggering event is released.

If a user triggers a triggering operation of a button in the toolbar of the input area under the condition that the toolbar of the input area is displayed on the page, responding to the triggering operation of the button in the toolbar of the input area, outputting a button identifier indicated by the triggering operation to a webpage rendering component by the webpage rendering component, and rendering and displaying the page according to a page updating mode indicated by the button identifier.

When the page update mode indicated by the button identifier is to update the focused input area, the webpage rendering component determines the area position of the updated focused input area based on the toolbar size information acquired from the native rendering component, and renders and displays the page based on the area position of the updated focused input area. When the page updating mode indicated by the button identifier is to display an input content configuration page, the webpage rendering component obtains page configuration information of the input content configuration page to be displayed, performs defocusing processing on the focused input area, renders the input content configuration page and displays the input content configuration page.

When the components of the page are mounted and the native rendering component does not meet the toolbar rendering conditions, the toolbar can be displayed through the webpage rendering component to achieve the spam, specifically, the webpage rendering component can create a toolbar instance, respond to a focusing event triggered on the page and aiming at an input area, the native rendering component can render and display a virtual input tool, and when the input area is configured with the toolbar, the webpage rendering component can call a second toolbar state updating interface, acquire toolbar state information and call a toolbar display interface, and render and display the toolbar of the input area based on the toolbar state information and the toolbar instance.

It can be appreciated that by adopting the toolbar display method in the page, the problems of toolbar shake, drifting, appearance and disappearance delay are solved, the problems of cursor drifting and toolbar covering of an indication input area are solved, the defect that the toolbar needs to be hidden during scrolling is overcome, and user interaction experience and toolbar stability are improved.

It should be understood that, although the steps in the flowcharts related to the embodiments described above are sequentially shown as indicated by arrows, these steps are not necessarily sequentially performed in the order indicated by the arrows. The steps are not strictly limited to the order of execution unless explicitly recited herein, and the steps may be executed in other orders. Moreover, at least some of the steps in the flowcharts described in the above embodiments may include a plurality of steps or a plurality of stages, which are not necessarily performed at the same time, but may be performed at different times, and the order of the steps or stages is not necessarily performed sequentially, but may be performed alternately or alternately with at least some of the other steps or stages.

Based on the same inventive concept, the embodiment of the application also provides a toolbar display device in the page, which is used for realizing the toolbar display method in the page. The implementation of the solution provided by the device is similar to the implementation described in the above method, so the specific limitation in the embodiments of the toolbar display device in one or more pages provided below may be referred to the limitation of the toolbar display method in the page hereinabove, and will not be repeated here.

In one embodiment, as shown in FIG. 20, there is provided a toolbar display device in a page, including: an event addition module 2002, a focus response module 2004, a toolbar display control module 2006, and a toolbar display module 2008, wherein:

The event adding module 2002 is used for binding a toolbar display event with a display trigger event of the virtual input tool through the webpage rendering component when the component of the page is mounted and the native rendering component meets the toolbar rendering condition, and adding monitoring of the display trigger event;

A focus response module 2004 for rendering and displaying a virtual input tool through the native rendering component in response to a focus event for the input region triggered at the page, and pushing a generation prompt displaying the trigger event to the web page rendering component;

the toolbar display control module 2006 is configured to, through the web page rendering component, obtain first toolbar state information when receiving a prompt for generating a display trigger event and the input area is configured with a toolbar, output the first toolbar state information to the native rendering component, trigger the toolbar display event, and output a toolbar display instruction to the native rendering component;

The toolbar display module 2008 is configured to render, by the native rendering component, and display a toolbar of the input area according to the first toolbar state information in response to the toolbar display instruction.

According to the toolbar display device in the page, when the components of the page are mounted and the native rendering component meets toolbar rendering conditions, the toolbar display event is bound with the display trigger event of the virtual input tool through the webpage rendering component, the display trigger event of the virtual input tool is monitored, the toolbar display event can be triggered, when the focusing event aiming at the input area is generated, interaction is realized through the display virtual input tool, the display trigger event is generated to inform the webpage rendering component, the webpage rendering component can know that the display trigger event is generated, and then under the condition that the toolbar is configured in the input area, the first toolbar state information is obtained, the first toolbar state information is output to the native rendering component, the toolbar display event is triggered, and a toolbar display instruction is output to the native rendering component, so that the native rendering component can render and display a toolbar of the input area according to the first toolbar state information by responding to the toolbar display instruction. The whole process controls the logic of displaying the toolbar through the webpage rendering component and renders the toolbar through the native rendering component, so that the logic of displaying the toolbar can be separated, the webpage rendering component controls the logic of displaying the toolbar and controls the native rendering component to render and display the toolbar in the process of rendering and displaying the virtual input tool, and stable display of the toolbar can be realized.

In one embodiment, the toolbar display control module is further configured to, through the web page rendering component, obtain, after receiving a prompt for generating a display trigger event, an area identifier of an input area, and determine that the input area is configured with a toolbar when the area identifier exists in a preconfigured list of focus area identifiers.

In one embodiment, the toolbar display control module is further configured to, when receiving a prompt for generating a display trigger event and the input area is configured with a toolbar, obtain first toolbar state information, call a first toolbar state update interface provided by the native rendering component, output the first toolbar state information to the native rendering component, trigger a toolbar display event through the web rendering component, call a toolbar display control interface provided by the native rendering component, and output a toolbar display instruction to the native rendering component.

In one embodiment, the device further comprises a creation module, wherein the creation module is used for calling a component mounted method through the webpage rendering component under the condition that the component of the webpage is mounted, calling a toolbar creation interface through the component mounted method, detecting the running environment of the native rendering component for toolbar rendering to obtain a running environment detection result, and determining that the native rendering component meets toolbar rendering conditions when the running environment detection result is that the running environment is ready.

In one embodiment, the creation module is further configured to invoke a toolbar creation interface, and in the presence of the native rendering component, obtain component configuration information of the native rendering component; the component configuration information comprises component version information and toolbar rendering configuration information, and when the component version information meets the toolbar rendering version requirement and the toolbar rendering configuration information characterizes that a toolbar rendering function is in an enabling state, the running environment detection result is determined to be that the running environment is ready.

In one embodiment, the device further comprises a page display module, wherein the page display module is used for responding to the triggering operation of the buttons in the toolbar aiming at the input area, outputting the button identification indicated by the triggering operation to the webpage rendering component through the native rendering component, and rendering and displaying the page according to the page updating mode indicated by the button identification through the webpage rendering component.

In one embodiment, the page display module is further configured to, when the page update manner indicated by the button identifier is to update the focused input area, determine, by the web page rendering component, an area location of the updated focused input area based on the toolbar size information obtained from the native rendering component, render and display the page based on the area location of the updated focused input area.

In one embodiment, the page display module is further configured to, when the page update mode indicated by the button identifier is to display an input content configuration page, obtain, through the web page rendering component, page configuration information of the input content configuration page to be displayed, perform out-of-focus processing on the focused input area, and render and display the input content configuration page.

In one embodiment, the device further comprises a defocusing response module, the defocusing response module is further used for binding a toolbar hiding event with a hiding trigger event of the virtual input tool through the webpage rendering module and adding monitoring on the hiding trigger event under the condition that the components of the webpage are mounted and the native rendering module meets the toolbar rendering condition, canceling display of the virtual input tool through the native rendering module and pushing a generation prompt of the hiding trigger event to the webpage rendering module in response to the defocusing event triggered on the webpage aiming at the input area, triggering the toolbar hiding event through the webpage rendering module after receiving the generation prompt of the hiding trigger event, outputting a toolbar hiding instruction to the native rendering module, and canceling display of the toolbar of the input area through the native rendering module in response to the toolbar hiding instruction.

In one embodiment, the device further comprises a component unloading module, wherein the component unloading module is used for responding to a component unloaded event of the page, calling a component unloading method through a webpage rendering component, calling a toolbar unloading interface through the component unloading method, releasing the binding of a toolbar display event and a display trigger event under the condition that the native rendering component meets toolbar rendering conditions, and releasing the monitoring of the display trigger event.

In one embodiment, the toolbar display module is further configured to create, by the web page rendering component, a toolbar instance when the component of the page is mounted and the native rendering component does not satisfy the toolbar rendering condition, render and display, by the native rendering component, a virtual input tool in response to a focus event for the input area triggered at the page, call, by the web page rendering component, a second toolbar state update interface to obtain second toolbar state information and call a toolbar display interface in case the input area is configured with a toolbar, and render and display the toolbar of the input area based on the second toolbar state information and the toolbar instance.

The various modules in the toolbar display device in the page described above may be implemented in whole or in part in software, hardware, and combinations thereof. The above modules may be embedded in hardware or may be independent of a processor in the computer device, or may be stored in software in a memory in the computer device, so that the processor may call and execute operations corresponding to the above modules.

In one embodiment, a computer device is provided, which may be a terminal or a server, and the internal structure of the computer device is as shown in fig. 21. The computer device includes a processor, a memory, an input/output interface, a communication interface, a display unit, and an input means. The processor, the memory and the input/output interface are connected through a system bus, and the communication interface, the display unit and the input device are connected to the system bus through the input/output interface. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage media. The input/output interface of the computer device is used to exchange information between the processor and the external device. The communication interface of the computer device is used for carrying out wired or wireless communication with an external terminal, and the wireless mode can be realized through WIFI, a mobile cellular network, NFC (near field communication) or other technologies. The computer program, when executed by a processor, implements a toolbar display method in a page. The display unit of the computer equipment is used for forming a visual picture, and can be a display screen, a projection device or a virtual reality imaging device, wherein the display screen can be a liquid crystal display screen or an electronic ink display screen, the input device of the computer equipment can be a touch layer covered on the display screen, can also be a key, a track ball or a touch pad arranged on a shell of the computer equipment, and can also be an external keyboard, a touch pad or a mouse and the like.

It will be appreciated by persons skilled in the art that the architecture shown in fig. 21 is merely a block diagram of some of the architecture relevant to the present inventive arrangements and is not limiting as to the computer device to which the present inventive arrangements are applicable, and that a particular computer device may include more or fewer components than shown, or may combine some of the components, or have a different arrangement of components.

In an embodiment, there is also provided a computer device comprising a memory and a processor, the memory having stored therein a computer program, the processor implementing the steps of the method embodiments described above when the computer program is executed.

In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored which, when executed by a processor, carries out the steps of the method embodiments described above.

In an embodiment, a computer program product is provided, comprising a computer program which, when executed by a processor, implements the steps of the method embodiments described above.

It should be noted that, the user information (including but not limited to account of user logging in application program, etc.) and data (including but not limited to data for analysis, stored data, presented data, etc.) related to the present application are information and data authorized by user or sufficiently authorized by each party, and the collection, use and processing of related data are required to meet the related regulations.

Those skilled in the art will appreciate that implementing all or part of the above described methods may be accomplished by way of a computer program stored on a non-transitory computer readable storage medium, which when executed, may comprise the steps of the embodiments of the methods described above. Any reference to memory, database, or other medium used in embodiments provided herein may include at least one of non-volatile and volatile memory. The nonvolatile Memory may include Read-Only Memory (ROM), magnetic tape, floppy disk, flash Memory, optical Memory, high density embedded nonvolatile Memory, resistive random access Memory (ReRAM), magneto-resistive random access Memory (Magnetoresistive Random Access Memory, MRAM), ferroelectric Memory (Ferroelectric Random Access Memory, FRAM), phase change Memory (PHASE CHANGE Memory, PCM), graphene Memory, and the like. Volatile memory can include random access memory (Random Access Memory, RAM) or external cache memory, and the like. By way of illustration, and not limitation, RAM can be in various forms such as static random access memory (Static Random Access Memory, SRAM) or dynamic random access memory (Dynamic Random Access Memory, DRAM), etc. The databases referred to in the embodiments provided herein may include at least one of a relational database and a non-relational database. The non-relational database may include, but is not limited to, a blockchain-based distributed database, and the like. The processor referred to in the embodiments provided in the present application may be a general-purpose processor, a central processing unit, a graphics processor, a digital signal processor, a programmable logic unit, a data processing logic unit based on quantum computing, or the like, but is not limited thereto.

The technical features of the above embodiments may be arbitrarily combined, and all possible combinations of the technical features in the above embodiments are not described for brevity of description, however, as long as there is no contradiction between the combinations of the technical features, they should be considered as the scope of the description.

The foregoing examples illustrate only a few embodiments of the application and are described in detail herein without thereby limiting the scope of the application. It should be noted that it will be apparent to those skilled in the art that several variations and modifications can be made without departing from the spirit of the application, which are all within the scope of the application. Accordingly, the scope of the application should be assessed as that of the appended claims.

Claims

1. A method for toolbar display in a page, the method comprising:

When the components of the page are mounted and the native rendering component meets the toolbar rendering conditions, binding a toolbar display event with a display trigger event of a virtual input tool through the webpage rendering component, and adding monitoring of the display trigger event; the toolbar rendering condition means that the running environment of the native rendering component is ready;

2. The method according to claim 1, wherein the method further comprises:

acquiring, by the web page rendering component, a region identifier of the input region after receiving a generation prompt of the display trigger event;

And when the area identifier exists in a preconfigured focusing area identifier list, determining that the input area is configured with a toolbar.

3. The method of claim 1, wherein the receiving, by the web page rendering component, the generation prompt of the display trigger event, and the input area configured with a toolbar, obtaining first toolbar state information, outputting the first toolbar state information to the native rendering component, and triggering the toolbar display event, outputting a toolbar display instruction to the native rendering component comprises:

Acquiring first toolbar state information through the webpage rendering component under the condition that the generating prompt of the display triggering event is received and the input area is configured with a toolbar, calling a first toolbar state updating interface provided by the native rendering component, and outputting the first toolbar state information to the native rendering component;

And triggering the toolbar display event through the webpage rendering component, calling a toolbar display control interface provided by the native rendering component, and outputting a toolbar display instruction to the native rendering component.

4. The method according to claim 1, wherein the method further comprises:

calling a component mounted method through the webpage rendering component under the condition that the component of the webpage is mounted; the component mounted method is a life cycle method in the act, and is called immediately after the component is mounted in the document object model;

calling a toolbar creation interface through the component mounted method, and detecting an operating environment of the native rendering component for toolbar rendering to obtain an operating environment detection result;

5. The method of claim 4, wherein the calling a toolbar creation interface to detect a runtime environment for toolbar rendering of the native rendering component, the runtime environment detection result comprising:

calling a toolbar creation interface, and acquiring component configuration information of the native rendering component under the condition that the native rendering component exists; the component configuration information comprises component version information and toolbar rendering configuration information;

and when the component version information meets the toolbar rendering version requirement and the toolbar rendering configuration information characterizes that the toolbar rendering function is in an enabling state, determining that the running environment detection result is that the running environment is ready.

6. The method according to claim 1, wherein the method further comprises:

responsive to a trigger operation for a button in a toolbar of the input area, outputting, by the native rendering component, a button identification indicated by the trigger operation to the web page rendering component;

7. The method of claim 6, wherein the rendering and displaying, by the web page rendering component, the page in accordance with the page update indicated by the button identification comprises:

When the page updating mode indicated by the button identifier is to update the focused input area, determining, by the webpage rendering component, the area position of the updated focused input area based on toolbar size information acquired from the native rendering component;

rendering and displaying the page based on the updated region position of the focused input region.

8. The method of claim 6, wherein the rendering and displaying, by the web page rendering component, the page in accordance with the page update indicated by the button identification comprises:

when the page updating mode indicated by the button identification is to display an input content configuration page, acquiring page configuration information of the input content configuration page to be displayed through the webpage rendering component, performing defocusing processing on the focused input area, and rendering and displaying the input content configuration page.

9. The method according to any one of claims 1 to 8, further comprising:

Binding a toolbar hidden event with a hidden trigger event of the virtual input tool through the webpage rendering component under the condition that the components of the webpage are mounted and the native rendering component meets toolbar rendering conditions, and adding monitoring of the hidden trigger event;

Responding to an out-of-focus event triggered on the page and aiming at an input area, canceling display of the virtual input tool by the native rendering component, and pushing a generation prompt of the hidden triggering event to the webpage rendering component;

triggering the toolbar hiding event after receiving the generation prompt of the hiding triggering event through the webpage rendering component, and outputting a toolbar hiding instruction to the original rendering component;

And canceling, by the native rendering component, a toolbar displaying the input area in response to the toolbar hiding instruction.

10. The method according to any one of claims 1 to 8, further comprising:

Responding to an unloading event of the component of the page, and calling a component unloading method through the webpage rendering component; the component uninstallation method is a lifecycle method in React, which is invoked when a component is removed from the document object model;

And calling a toolbar unloading interface through the component unloading method, and under the condition that the native rendering component meets the toolbar rendering condition, unbinding the toolbar display event and the display triggering event and unbinding the display triggering event.

11. The method according to any one of claims 1 to 8, further comprising:

When the components of the page are mounted and the native rendering components do not meet the toolbar rendering conditions, creating a toolbar instance through the webpage rendering components;

rendering and displaying, by the native rendering component, a virtual input tool in response to a focus event for an input area triggered at the page;

And under the condition that the toolbar is configured in the input area, calling a second toolbar state updating interface through the webpage rendering component, acquiring second toolbar state information, calling a toolbar display interface, and rendering and displaying a toolbar of the input area based on the second toolbar state information and the toolbar instance.

12. A toolbar display apparatus in a page, the apparatus comprising:

The event adding module is used for binding a toolbar display event with a display trigger event of the virtual input tool through the webpage rendering component when the component of the page is mounted and the native rendering component meets the toolbar rendering condition, and adding monitoring of the display trigger event; the toolbar rendering condition means that the running environment of the native rendering component is ready;

13. The apparatus of claim 12, wherein the toolbar display control module is further configured to, via the web page rendering component, obtain, after receiving the prompt for generation of the display trigger event, a region identification of the input region, and determine that the input region is configured with a toolbar when the region identification exists in a preconfigured list of focus region identifications.

14. The apparatus of claim 12, wherein the toolbar display control module is further configured to, when receiving, by the web page rendering component, a prompt for generating the display trigger event and the input area is configured with a toolbar, obtain first toolbar state information, invoke a first toolbar state update interface provided by the native rendering component, output the first toolbar state information to the native rendering component, trigger, by the web page rendering component, the toolbar display event, invoke a toolbar display control interface provided by the native rendering component, and output a toolbar display instruction to the native rendering component.

15. The apparatus of claim 12, further comprising a creation module for, in a case where a component of the page is mounted, calling a component mounted method through the web page rendering component, the component mounted method being one of the lifecycle methods in the act, calling a toolbar creation interface through the component mounted method, detecting a running environment of the native rendering component for toolbar rendering, resulting in a running environment detection result, and determining that the native rendering component satisfies the toolbar rendering condition when the running environment detection result is that the running environment is ready.

16. The apparatus of claim 15, wherein the creation module is further configured to invoke a toolbar creation interface to obtain component configuration information for the native rendering component if the native rendering component is present; the component configuration information comprises component version information and toolbar rendering configuration information, and when the component version information meets toolbar rendering version requirements and the toolbar rendering configuration information characterizes a toolbar rendering function to be in an enabling state, the detection result of the running environment is determined to be that the running environment is ready.

17. The apparatus of claim 12, further comprising a page display module that, in response to a triggering operation of a button in a toolbar for the input area, outputs, by the native rendering component, a button identification indicated by the triggering operation to the web page rendering component, and renders, by the web page rendering component, the page and displays in a page update manner indicated by the button identification.

18. The apparatus of claim 17, wherein the page display module is further configured to, when the page update indicated by the button identifier is to update a focused input area, determine, by the web page rendering component, an area location of the updated focused input area based on toolbar size information obtained from the native rendering component, and render and display the page based on the area location of the updated focused input area.

19. The apparatus of claim 17, wherein the page display module is further configured to, when the page update indicated by the button identifier is to display an input content configuration page, obtain, by the web page rendering component, page configuration information of the input content configuration page to be displayed, perform out-of-focus processing on the focused input area, and render and display the input content configuration page.

20. The apparatus of any one of claims 12 to 19, further comprising an out-of-focus response module to bind a toolbar hidden event with a hidden trigger event of the virtual input tool through the web page rendering component and add monitoring of the hidden trigger event, to cancel display of the virtual input tool through the native rendering component and push a prompt for generation of the hidden trigger event to the web page rendering component in response to the out-of-focus event triggered at the page for an input area, to trigger the toolbar hidden event through the web page rendering component after receiving the prompt for generation of the hidden trigger event, to output a toolbar hidden instruction to the native rendering component, and to cancel display of a toolbar of the input area through the native rendering component in response to the toolbar hidden instruction.

21. The apparatus of any one of claims 12 to 19, further comprising a component uninstallation module for invoking a component uninstallation method, via the web page rendering component, in response to a component uninstalled event of the page, the component uninstallation method being one of the lifecycle methods in a act that is invoked when a component is removed from the document object model, invoking a toolbar uninstallation interface, via the component uninstallation method, unbinding the toolbar display event and the display triggering event, and unbinding the display triggering event, if the native rendering component satisfies the toolbar rendering condition.

22. The apparatus of any of claims 12 to 19, wherein the toolbar display module is further configured to, when a component of the page is installed and the native rendering component does not satisfy the toolbar rendering condition, create a toolbar instance through the web rendering component, render and display a virtual input tool through the native rendering component in response to a focus event for an input area triggered at the page, call a second toolbar state update interface through the web rendering component in a case where the input area is configured with a toolbar, obtain second toolbar state information, and call a toolbar display interface, render and display a toolbar of the input area based on the second toolbar state information and the toolbar instance.

23. A computer device comprising a memory and a processor, the memory storing a computer program, characterized in that the processor implements the steps of the method of any one of claims 1 to 11 when the computer program is executed.

24. A computer readable storage medium, on which a computer program is stored, characterized in that the computer program, when being executed by a processor, implements the steps of the method of any of claims 1 to 11.

25. A computer program product comprising a computer program, characterized in that the computer program, when being executed by a processor, implements the steps of the method of any one of claims 1 to 11.