Client embedded webpage and mobile phone keyboard interaction method and system
By judging the browser type in the client's embedded web page and taking corresponding measures, the problem of keyboard blocking the input box on Android devices is solved, improving user experience and compatibility.
Patent Information
- Application Number
- CN202411851924.2
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-16
- Publication Date
- 2025-02-14
AI Technical Summary
The prior art has many problems when dealing with input frame focus events, especially on Android devices, which causes the keyboard to often block the input frame and affect the user's input experience.
By implementing interactive methods in the client embedded web page, we can determine the current browser type. If it is an Android browser, use a mask layer to cover the current page and generate a temporary input box; if it is a Safari, raise the page from the bottom. To avoid keyboard occlusion of input boxes.
It effectively solves the problem that the input box is blocked by the keyboard in different devices and browser environments, and improves the compatibility and user experience of embedded web pages.
Smart Images
Figure CN119440378A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of computer communication, and in particular to a method and system for interaction between a client-embedded web page and a mobile phone keyboard. Background Art
[0002] Embedded web pages are widely used in client development. They are the preferred solution for many applications due to their advantages such as fast development speed and convenient update. However, the input experience of embedded web pages is one of the important factors affecting user satisfaction. Existing technologies have many problems in handling input box focus events, especially on Android devices. Due to the different keyboard styles of Android phones of different brands and models, some keyboards are larger, some are smaller, and some even pop up from the side. These differences cause the keyboard to often block the input box, seriously affecting the user's input experience. In addition, different browsers handle input box focus events in different ways, which increases the compatibility difficulty of the page and requires developers to invest a lot of energy in adaptation and debugging. Summary of the invention
[0003] The purpose of the present invention is to provide a method and system for interaction between a client-embedded web page and a mobile phone keyboard, which effectively solves the problem that an input box is blocked by a keyboard in different devices and browser environments.
[0004] The technical solution of the present invention:
[0005] A method for interacting between a client-embedded web page and a mobile phone keyboard, the method comprising the following steps:
[0006] Step 1: When the original input box is clicked, the phone will automatically wake up the keyboard, and the embedded web page will determine the current browser type;
[0007] If it is an Android browser, a mask layer is used to cover the current page, and a temporary input box is generated on the top of the current page; at the same time, the embedded web page will obtain the content of the original input box and display it on the temporary input box;
[0008] If it is an Apple browser, the current page is raised n pixels from the bottom, so that the original input box is also raised n pixels to follow the current page, so as to avoid the keyboard covering the original input box;
[0009] Step 2: When the user closes the keyboard,
[0010] If it is an Android browser, the content of the temporary input box is transferred to the original input box and the mask layer is hidden;
[0011] If it is an Apple browser, the height of the original input box will be restored.
[0012] Furthermore, the step 1 is further specified as follows: the embedded webpage monitors the focus event of the original input box. When the original input box is clicked, the mobile phone automatically wakes up the keyboard due to the default mechanism, and the focus event is triggered at the same time, and the embedded webpage determines the current client type;
[0013] If it is an Android browser, a mask layer is used to cover the current page, and a temporary input box is generated on the top of the current page; at the same time, the embedded web page will obtain the content of the original input box and display it on the temporary input box;
[0014] If it is an Apple browser, the current page will be raised n pixels from the bottom, so that the original input box is also raised n pixels along with the current page, so as to avoid the keyboard covering the original input box.
[0015] Furthermore, in step 1, the embedded webpage uses the monitoring method addEventListener() in the js method to monitor the focus event of the original input box.
[0016] Furthermore, in step 1, the browser type is detected by the browser engine property navigator.userAgent; in step 1, n≥200.
[0017] Furthermore, in step 1, if it is an Android browser, a mask layer is used to cover the current page, and a temporary input box is generated at the top of the current page; at the same time, the embedded web page obtains the content in the original input box by executing the value attribute of the js method, and copies it to the newly generated temporary input box.
[0018] Furthermore, in step 2, if it is an Android browser, the JavaScript method close() predefined on the embedded web page is executed by calling the page script method evaluateJavascript to transfer the content of the temporary input box to the original input box.
[0019] A client embedded web page and mobile phone keyboard interactive system, the system includes a judgment module and a recovery module;
[0020] Judgment module: When the original input box is clicked, the phone will automatically wake up the keyboard, and the embedded web page will determine the current browser type;
[0021] If it is an Android browser, a mask layer is used to cover the current page, and a temporary input box is generated on the top of the current page; at the same time, the embedded web page will obtain the content of the original input box and display it on the temporary input box;
[0022] If it is an Apple browser, the current page is raised n pixels from the bottom, so that the original input box is also raised n pixels to follow the current page, so as to avoid the keyboard covering the original input box;
[0023] Restore module: When the user closes the keyboard,
[0024] If it is an Android browser, the content of the temporary input box is transferred to the original input box and the mask layer is hidden;
[0025] If it is an Apple browser, the height of the original input box will be restored.
[0026] Furthermore, the judgment module is further specified as follows: the embedded webpage monitors the focus event of the original input box. When the original input box is clicked, the mobile phone automatically wakes up the keyboard due to the default mechanism, and the focus event is triggered at the same time, and the embedded webpage determines the current client type;
[0027] If it is an Android browser, a mask layer is used to cover the current page, and a temporary input box is generated on the top of the current page; at the same time, the embedded web page will obtain the content of the original input box and display it on the temporary input box;
[0028] If it is an Apple browser, the current page will be raised n pixels from the bottom, so that the original input box is also raised n pixels along with the current page, so as to avoid the keyboard covering the original input box.
[0029] Furthermore, in the judgment module, the embedded webpage uses the monitoring method addEventListener() in the js method to monitor the focus event of the original input box.
[0030] Furthermore, in the judgment module, the browser type is detected through the browser engine attribute navigator.userAgent; in step 1, n≥200.
[0031] Furthermore, in the judgment module, if it is an Android browser, a mask layer is used to cover the current page, and a temporary input box is generated on the top of the current page; at the same time, the embedded web page obtains the content in the original input box by executing the value attribute of the js method, and copies it to the newly generated temporary input box.
[0032] Furthermore, in the recovery module, if it is an Android browser, the JavaScript method close() predefined on the embedded web page is executed by calling the page script method evaluateJavascript to transfer the content of the temporary input box to the original input box.
[0033] Beneficial effects of the present invention:
[0034] The present invention provides a method and system for interacting between a client embedded web page and a mobile phone keyboard, which effectively solves the problem of an input box being blocked by a keyboard in different devices and browser environments, and improves the compatibility of the embedded web page and the user experience. BRIEF DESCRIPTION OF THE DRAWINGS
[0035] Figure 1 It is a schematic flow chart of the method of the present invention.
[0036] Figure 2 It is a system principle block diagram of the present invention. DETAILED DESCRIPTION
[0037] The present invention will be further described below in conjunction with the accompanying drawings.
[0038] like Figure 1 The present invention provides a method for interacting between a client embedded web page and a mobile phone keyboard, the method comprising the following steps:
[0039] Step 1: When the original input box is clicked, the phone will automatically wake up the keyboard, and the embedded web page will determine the current browser type;
[0040] If it is an Android browser, a mask layer is used to cover the current page, and a temporary input box is generated on the top of the current page; at the same time, the embedded web page will obtain the content of the original input box and display it on the temporary input box;
[0041] If it is an Apple browser, the current page is raised n pixels from the bottom, so that the original input box is also raised n pixels to follow the current page, so as to avoid the keyboard covering the original input box;
[0042] Step 2: When the user closes the keyboard,
[0043] If it is an Android browser, the content of the temporary input box is transferred to the original input box and the mask layer is hidden;
[0044] If it is an Apple browser, the height of the original input box will be restored.
[0045] The step 1 is further specifically as follows: the embedded webpage monitors the focus event of the original input box. When the original input box is clicked, the mobile phone automatically wakes up the keyboard due to the default mechanism, and the focus event is triggered at the same time, and the embedded webpage determines the current client type;
[0046] If it is an Android browser, a mask layer is used to cover the current page, and a temporary input box is generated on the top of the current page; at the same time, the embedded web page will obtain the content of the original input box and display it on the temporary input box;
[0047] If it is an Apple browser, the current page will be raised n pixels from the bottom, so that the original input box is also raised n pixels along with the current page, so as to avoid the keyboard covering the original input box.
[0048] In the step 1, the embedded webpage uses the monitoring method addEventListener() in the js method to monitor the focus event of the original input box.
[0049] In the step 1, the browser type is detected by the browser engine property navigator.userAgent; in the step 1, n≥200.
[0050] In step 1, if it is an Android browser, a mask layer is used to cover the current page, and a temporary input box is generated at the top of the current page; at the same time, the embedded web page obtains the content in the original input box by executing the value attribute of the js method, and copies it to the newly generated temporary input box.
[0051] In step 2, if it is an Android browser, the JavaScript method close() predefined on the embedded web page is executed by calling the page script method evaluateJavascript, thereby transferring the content of the temporary input box to the original input box.
[0052] The present invention will be further described below in conjunction with a specific embodiment:
[0053] A method for interacting between a client-embedded web page and a mobile phone keyboard, the method comprising the following steps:
[0054] Step 1: When the original input box is clicked, the phone will automatically wake up the keyboard, and the embedded web page will determine the current browser type;
[0055] If it is an Android browser, a mask layer is used to cover the current page, and a temporary input box is generated on the top of the current page; at the same time, the embedded web page will obtain the content of the original input box and display it on the temporary input box;
[0056] If it is an Apple browser, the current page is raised n pixels from the bottom, so that the original input box is also raised n pixels to follow the current page, so as to avoid the keyboard covering the original input box;
[0057] The embedded web page monitors the focus event of the original input box. When the original input box is clicked, the phone will automatically wake up the keyboard due to the default mechanism. At the same time, the focus event is triggered, and the embedded web page will determine the current client type.
[0058] If it is an Android browser, a mask layer is used to cover the current page, and a temporary input box is generated on the top of the current page; at the same time, the embedded web page will obtain the content of the original input box and display it on the temporary input box;
[0059] If it is an Apple browser, the current page will be raised n pixels from the bottom, so that the original input box is also raised n pixels along with the current page, so as to avoid the keyboard covering the original input box.
[0060] The embedded web page uses the listening method addEventListener() in the js method to listen to the focus event of the original input box.
[0061] Detect the browser type through the browser engine property navigator.userAgent; n ≥ 200.
[0062] If it is an Android browser, a mask layer is used to cover the current page, and a temporary input box is generated on the top of the current page; at the same time, the embedded web page obtains the content in the original input box by executing the value attribute of the js method, and copies it to the newly generated temporary input box.
[0063] Example: The embedded webpage listens to the focus event of the input box. When the input box is clicked, the phone will automatically wake up the keyboard and the focus event will be triggered. The embedded webpage will determine the current browser type. If it is an Android browser, it will use a mask layer to cover the current page and display the top input box. At the same time, the embedded webpage will obtain the content of the original input box and display it on the newly popped-up input box. When the embedded webpage triggers the focus event and determines that the browser type is Apple's browser, the current input box is raised 'n'px from the bottom of the page to prevent the keyboard from blocking the input box. This ensures that the user can clearly see the input box when typing.
[0064] Assume that a problem feedback webpage is opened in the embedded browser of the client. There is a text input box (ID is `txt`) at the bottom of the webpage for users to enter questions. The embedded webpage uses the js method listener method addEventListener() to listen to the focus event of this input box and executes the code `document.getElementById('txt').addEventListener('focus',function(){...})`. When the user clicks the input box, the default mechanism of the application will cause the mobile phone keyboard to pop up automatically, which sometimes causes the input box to be blocked by the keyboard, especially on Android devices, because the keyboard size and pop-up method of different brands and models vary significantly. To solve this problem, when the page detects that the input box has gained focus, it will use `navigator.userAgent` to determine whether the current access device is an Android system. If it is an Android device, the page will take the following measures: first, a mask is superimposed on the current page to prevent users from interacting with the blocked input box unnecessarily; second, a temporary input box is dynamically generated at the top of the page to replace the blocked original input box. At the same time, the value property of the js method is executed to obtain the content in the original input box, execute the code `document.getElementById("txt").value`, and copy it to the newly generated temporary input box to ensure that users can see and continue to edit the information they previously entered. Through this mechanism, the visibility and convenience of user input information can be guaranteed even under Android phone keyboards of different sizes and styles, thereby improving the overall user experience.
[0065] When the embedded web page triggers the `focus` event of the input box, and the browser engine property `navigator.userAgent` detects that the browser type contains any of the strings "iPhone", "iPod", "iPad" or "iOS", it indicates that the user is using the browser of an Apple device. In this case, in order to prevent the keyboard from blocking the input box, the web page will adjust the position of the current input box (i.e. the original input box) so that it is at least 200px from the bottom of the page. This adjustment ensures that users can clearly see the input box when typing, thereby improving the user experience. Since the Apple mobile phone keyboard is relatively fixed and is displayed at the bottom, the page is uniformly moved up, so that there is no need to block the page and the input box is avoided from being blocked.
[0066] Step 2: When the user closes the keyboard,
[0067] If it is an Android browser, the content of the temporary input box is transferred to the original input box and the mask layer is hidden;
[0068] If it is an Apple browser, the height of the original input box will be restored.
[0069] If it is an Android browser, the JavaScript method close() predefined on the embedded web page is executed by calling the page script method evaluateJavascript, so as to transfer the content of the temporary input box to the original input box.
[0070] For example: The client monitors the keyboard closing event, which is triggered when the user enters text in the top input box and closes the keyboard. The client calls the keyboard closing callback JS method provided by the embedded web page. After the web page receives the callback, if it is an Android client, the content of the current top input box is assigned to the original input box, so as to ensure that the user input content is correctly passed back to the original input box. If it is an Apple client, the height from the bottom is restored, so that the page drops to the original height.
[0071] Implement monitoring of the mobile phone keyboard closing event in the client App. When the user completes text input in the top pop-up input box and clicks to close the mobile phone keyboard, a specific event will be triggered. At this time, the client can execute the JavaScript method close() predefined on the embedded web page by calling the page script method evaluateJavascript, and execute the code webView.evaluateJavascript("javascript:close()"). The function of this method is to safely transfer the content of the top input box to the original input box in the page, so as to ensure that the content entered by the user is correctly passed back to the original input box. If it is an Apple client, the height from the bottom will be restored so that the page drops to the original height.
[0072] like Figure 2 ,The present invention also provides a client embedded web page and mobile phone keyboard interaction system, the system includes a judgment module and a recovery module;
[0073] Judgment module: When the original input box is clicked, the phone will automatically wake up the keyboard, and the embedded web page will determine the current browser type;
[0074] If it is an Android browser, a mask layer is used to cover the current page, and a temporary input box is generated on the top of the current page; at the same time, the embedded web page will obtain the content of the original input box and display it on the temporary input box;
[0075] If it is an Apple browser, the current page is raised n pixels from the bottom, so that the original input box is also raised n pixels to follow the current page, so as to avoid the keyboard covering the original input box;
[0076] Restore module: When the user closes the keyboard,
[0077] If it is an Android browser, the content of the temporary input box is transferred to the original input box and the mask layer is hidden;
[0078] If it is an Apple browser, the height of the original input box will be restored.
[0079] The determination module is further specifically configured as follows: the embedded webpage monitors the focus event of the original input box. When the original input box is clicked, the mobile phone automatically wakes up the keyboard due to the default mechanism, and the focus event is triggered at the same time, and the embedded webpage determines the current client type;
[0080] If it is an Android browser, a mask layer is used to cover the current page, and a temporary input box is generated on the top of the current page; at the same time, the embedded web page will obtain the content of the original input box and display it on the temporary input box;
[0081] If it is an Apple browser, the current page will be raised n pixels from the bottom, so that the original input box is also raised n pixels along with the current page, so as to avoid the keyboard covering the original input box.
[0082] In the judgment module, the embedded webpage uses the monitoring method addEventListener() in the js method to monitor the focus event of the original input box.
[0083] In the judgment module, the browser type is detected by the browser engine attribute navigator.userAgent; in step 1, n≥200.
[0084] In the judgment module, if it is an Android browser, a mask layer is used to cover the current page, and a temporary input box is generated on the top of the current page; at the same time, the embedded web page obtains the content in the original input box by executing the value attribute of the js method, and copies it to the newly generated temporary input box.
[0085] In the recovery module, if it is an Android browser, the JavaScript method close() predefined on the embedded web page is executed by calling the page script method evaluateJavascript, so as to transfer the content of the temporary input box to the original input box.
[0086] In summary, the present invention effectively solves the problem of the input box being blocked by the keyboard in different devices and browser environments, and improves the compatibility and user experience of embedded web pages.
[0087] The above description is only a preferred embodiment of the present invention and should not be construed as limiting the present application. All equivalent changes and modifications made within the scope of the patent application of the present invention should fall within the scope of the present invention.
Claims
1. A method for interacting between a client-embedded web page and a mobile phone keyboard, characterized in that: The method comprises the following steps, Step 1: When the original input box is clicked, the phone will automatically wake up the keyboard, and the embedded web page will determine the current browser type; If it is an Android browser, a mask layer is used to cover the current page, and a temporary input box is generated on the top of the current page; at the same time, the embedded web page will obtain the content of the original input box and display it on the temporary input box; If it is an Apple browser, the current page is raised n pixels from the bottom, so that the original input box is also raised n pixels to follow the current page, so as to avoid the keyboard covering the original input box; Step 2: When the user closes the keyboard, If it is an Android browser, the content of the temporary input box is transferred to the original input box and the mask layer is hidden; If it is an Apple browser, the height of the original input box will be restored.
2. A method for interacting between a client-embedded web page and a mobile phone keyboard according to claim 1, characterized in that: The step 1 is further specifically as follows: the embedded webpage monitors the focus event of the original input box. When the original input box is clicked, the mobile phone automatically wakes up the keyboard due to the default mechanism, and the focus event is triggered at the same time, and the embedded webpage determines the current client type; If it is an Android browser, a mask layer is used to cover the current page, and a temporary input box is generated on the top of the current page; at the same time, the embedded web page will obtain the content of the original input box and display it on the temporary input box; If it is an Apple browser, the current page will be raised n pixels from the bottom, so that the original input box is also raised n pixels along with the current page, so as to avoid the keyboard covering the original input box.
3. A method for interacting between a client-embedded web page and a mobile phone keyboard according to claim 2, characterized in that: In the step 1, the embedded webpage uses the monitoring method addEventListener() in the js method to monitor the focus event of the original input box.
4. A method for interacting between a client-embedded web page and a mobile phone keyboard according to claim 1, characterized in that: In the step 1, the browser type is detected by the browser engine property navigator.userAgent; in the step 1, n≥200.
5. The method for interacting between a client-embedded web page and a mobile phone keyboard according to claim 1, characterized in that: In step 1, if it is an Android browser, a mask layer is used to cover the current page, and a temporary input box is generated at the top of the current page; at the same time, the embedded web page obtains the content in the original input box by executing the value attribute of the js method, and copies it to the newly generated temporary input box.
6. A method for interacting between a client-embedded web page and a mobile phone keyboard according to claim 1, characterized in that: In step 2, if it is an Android browser, the JavaScript method close() predefined on the embedded web page is executed by calling the page script method evaluateJavascript, thereby transferring the content of the temporary input box to the original input box.
7. A client-embedded web page and mobile phone keyboard interactive system, characterized in that: The system includes a judgment module and a recovery module; Judgment module: When the original input box is clicked, the phone will automatically wake up the keyboard, and the embedded web page will determine the current browser type; If it is an Android browser, a mask layer is used to cover the current page, and a temporary input box is generated on the top of the current page; at the same time, the embedded web page will obtain the content of the original input box and display it on the temporary input box; If it is an Apple browser, the current page is raised n pixels from the bottom, so that the original input box is also raised n pixels to follow the current page, so as to avoid the keyboard covering the original input box; Restore module: When the user closes the keyboard, If it is an Android browser, the content of the temporary input box is transferred to the original input box and the mask layer is hidden; If it is an Apple browser, the height of the original input box will be restored.
8. A client-embedded web page and mobile phone keyboard interactive system according to claim 7, characterized in that: The determination module is further specifically configured as follows: the embedded webpage monitors the focus event of the original input box. When the original input box is clicked, the mobile phone automatically wakes up the keyboard due to the default mechanism, and the focus event is triggered at the same time, and the embedded webpage determines the current client type; If it is an Android browser, a mask layer is used to cover the current page, and a temporary input box is generated on the top of the current page; at the same time, the embedded web page will obtain the content of the original input box and display it on the temporary input box; If it is an Apple browser, the current page will be raised n pixels from the bottom, so that the original input box is also raised n pixels along with the current page, so as to avoid the keyboard covering the original input box.
9. A client-embedded web page and mobile phone keyboard interactive system according to claim 8, characterized in that: In the judgment module, the embedded webpage uses the monitoring method addEventListener() in the js method to monitor the focus event of the original input box.
10. The client-embedded web page and mobile phone keyboard interactive system according to claim 7, characterized in that: In the judgment module, the browser type is detected by the browser engine attribute navigator.userAgent; in step 1, n≥200.
11. A client-embedded web page and mobile phone keyboard interactive system according to claim 7, characterized in that: In the judgment module, if it is an Android browser, a mask layer is used to cover the current page, and a temporary input box is generated on the top of the current page; at the same time, the embedded web page obtains the content in the original input box by executing the value attribute of the js method, and copies it to the newly generated temporary input box.
12. The client-embedded web page and mobile phone keyboard interactive system according to claim 7, characterized in that: In the recovery module, if it is an Android browser, the JavaScript method close() predefined on the embedded web page is executed by calling the page script method evaluateJavascript, so as to transfer the content of the temporary input box to the original input box.