background

In a recent Hybrid App project, THE H5 I implemented had the following two requirements:

  1. Use quill.js to implement a rich text editor. However, the toolbar needs to be fixed to the bottom, and when the input method pops up, the toolbar needs to be suspended above the input method keyboard, as shown below:

  1. It’s just a normal form with text input and drop-down options,The dropdown option does not occlude the focused input box when it pops upAs shown in the picture below, when clicking on the picture on the leftComplex LabelsWhen, the dropdown option pops up, and the dropdown option is blockedComplex LabelsThe product requires that when the drop-down option pops up, it cannot block the currently focused form item, i.eComplex labels


The quill. Js toolbar is faulty

The toolbar uses fixed positioning, and the CSS is shown as follows:

#ql-toolbar {
    position: fixed;
    bottom: 10px;
    left: 0;
    right: 0;
    z-index: 200; 
}
Copy the code

Fixed positioning elements are positioned relative to the screen viewport. When H5 is embedded in the Webview of app for display, it can be understood as: Fixed is positioned relative to the Webview.

When the cursor is focused on the editing area to input text, the system-level input keyboard will pop up. At this point, the pop-up of the keyboard will have a certain impact on the height of webView, and Android and ios have different processing of WebView. To put it simply:

  • On Android: In the image below, when the keyboard does not pop up,Webview height = left blue box heightWhen the keyboard pops up,Webview height = the height of the blue box on the right - the height of the red box keyboardThat is, the height of the WebView is the height of the green box


  • On ios: The height of the WebView does not change with the pop-up of the keyboard, it is always the height of the blue box on the left

To sum up, when fixed is used to position the toolbar, on Android, the height of webView will be reduced when the keyboard pops up, so the toolbar will be suspended above the keyboard. That is to say, this implementation meets the requirements on Android. However, ios does not change the height of the WebView. Therefore, when the keyboard pops up, the toolbar is always at the bottom of the screen, which is blocked by the keyboard, which does not meet the requirements. Therefore, special processing is required for ios

Solution on ios

There are three solutions:

  1. Design changes: Putting the toolbar at the top is the least expensive way to make changes and the most compatible, which is recommended if you can convince the product
  2. On the ios app end, when the keyboard pops up, set the height of the WebView to screen height – keyboard height, which is the same as the processing mode of Android. This method is not recommended. The first reason is that it changes the default processing mechanism of ios. When H5 is used in other ios apps, the same occlusion problem will still occur. The second reason is the strong coupling of the business and end of H5
  3. On the ios app end, when the keyboard pops up, H5 is informed of the height of the keyboard through events. Then H5 dynamically calculates the position of the toolbar according to the height of webView and the height of the keyboard and locates it on the keyboard. It is feasible when the page of H5 only needs to be used in our app and does not need to be compatible with other apps. It is still not feasible if the page needs to be compatible with other apps, because other apps will not tell us the height of the keyboard through events

Generally speaking, there is no good way to deal with this problem, and there are more or less certain problems. Finally, we decided to implement the rich text editor by the end, and H5 to achieve the preview page after editing

Dropdown options block input fields

The reason why the text input box does not block is that when the text input box is input, the system level input method keyboard pops up, so it does not block. However, for the drop-down option, the drop-down option of the pop-up box is realized by ourselves, which is not system-level. Therefore, the system will not deal with it. For example, the focused input box will be pushed to the visual range, so it will lead to occlusion problems.

The solution to this problem can be divided into the following steps:

  1. If the height of the scroll area is smaller than the height of the screen, it means that you need to fill the bottom with an empty div element to spread the page and create a vertical scroll bar so that the input box can be topped up. The div height is the height of the popup box, temporarily named popH. In this case, this step will solve the occlusion problem
  2. If the height of the scroll area is greater than that of the screen, perform the following operations:

Source code effect is as follows:

  1. The scroll area is smaller than the screen height

  1. The height of the scroll area is equivalent to the height of the screen

  1. The scroll height is greater than the screen height