[Cordova/phonegap] Cordova IOS App When a third-party input Method keyboard popup (click the input box), the page does not move up, resulting in the input box keyboard occlusion solution

http://blog.csdn.net/lovelyelfpop/article/details/52033045

Cordova iOS app when using the system comes with the Input method keyboard, the Focus text box will move the overall WebView interface, such as:

However, if you use a third-party input method (Baidu, Sogou, QQ Input method, etc. are), focus text box pop-up keyboard, the interface will not move overall, resulting in the text box is obscured by soft keyboard, such as:

Not only is it obscured, but the bottom text box cannot be dragged and scrolled to the viewable area.

Workaround one: third-party keyboard popup, implementation interface can also be moved up

Using the Ionic-plugins-keyboard plugin, when the keyboard pops up, use the JS code to move the overall interface up

Interface up, in fact, is window.scrolly changed, and third-party keyboard pop-up window.scrolly is always 0

1. Add Plugin Https://github.com/driftyco/ionic-plugin-keyboard

2, listen native.keyboardshow keyboard pop-up event, when the keyboard pops up, perform window.scrollto (0, keyboard height), the code is as follows:

[JavaScript]View PlainCopy

2. var Isios =!! Navigator.userAgent.match (/\ (i[^;] +;( U;)? Cpu.+mac OS x/); //judgment is iOS
4. if (Isios) {
6. function Keyboardshowhandler (e) {
8. If (window.scrolly <) //keyboard height is generally greater than 100, if scrolly is less than 100, you can think that the interface is not up, you need to manually move up
10. Window.scrollto (0, e.keyboardheight);
12. }
14. function Keyboardhidehandler (e) {
16. if (window.scrolly! = 0)
18. Window.scrollto (0, 0);
20. }
22. Window.addeventlistener (' native.keyboardshow ', keyboardshowhandler);
24. Window.addeventlistener (' native.keyboardhide ', keyboardhidehandler);
26. }

Advantages:

• The overall interface moves in the same experience as the iOS default IME keyboard
• Because the interface moves up, the text box is not obscured by the keyboard

Disadvantages:

• If your Cordova app has a top bar, the top bar may be moved up and out of sight
• Although the text box is not obscured by the keyboard, it may move up to an invisible location (such as clicking on the top of the text box)

Workaround two: When the keyboard pops up, let the webview height shrink, similar to Android

Use the Cordova-plugin-keyboard plugin to set up several configurations provided by the plugin

1. Add Plugin: Https://github.com/cjpearson/cordova-plugin-keyboard

2, add 2 configurations in config. <platform name= "ios" > node

[HTML]View PlainCopy

1. <preference name="Keyboardshrinksview" value="true" />
2. <preference name="Disablescrollingwhenkeyboardshrinksview" value="true" />

The first configuration is: Shrink WebView (similar to Android behavior) when the keyboard pops up
The second configuration is: Prohibit the iOS default keyboard pop-up interface move behavior

3, you may need to click on the text box, the keyboard pop-up, handle the text box to scroll to the visible area.

Advantages:

• High shrinkage and Android experience consistent, the top bar does not appear with the keyboard to move up, resulting in invisible

Disadvantages:

• You may need to handle the interface scrolling yourself, scrolling the text box to the viewable area after the interface shrinks. If you're using Sencha Touch or ExtJS6 modern, you can see the solution to the mobile development Sencha Touch pop-up keyboard blocking the input box
• If the Iscroll, Sencha Touch, ExtJS6 modern frame, scroll bar is CSS3 tranform simulation rather than native scrolling, the cursor display will be a bit problematic, but does not affect the input, this problem has a workaround, you can view the iOS use Sencha When a frame is Touch, ExtJs6 modern, or Iscroll, the text box focus cursor does not follow the resolution of the page (text box) scrolling

If you're using Sencha Touch, the following is important:

Phenomenon:

If you use the EXTJS6 Modern,keyboardshrinksview set to True,app the interface will shrink, but if you use Sencha Touch, you will find that the interface actually does not shrink (ios8+).

Main reasons:

Sencha Touch does the Cordova app under iOS,<body> elements and ext.viewport height and width are fixed, such as:

and EXTJS6 modern do the Cordova app is 100%, such as:

The result is that the ext.viewport height of the Sencha touch is fixed and does not shrink as the webview shrinks.

Workaround:

Open File Myapp\touch\src\viewport\ios.js

Put

[JavaScript]View PlainCopy

1. if (Ext.os.version.gtEq (' 7 ')) {
2. //IPad or homescreen or UIWebView
3. if (Ext.os.deviceType = = = ' Tablet ' | |! Ext.browser.is.Safari | | Window.navigator.standalone) {

Revision changed to

[JavaScript]View PlainCopy

1. if (Ext.os.version.gtEq (' 7 ') && Ext.os.version.lt (' 8 ')) { //plus the judgment version is less than 8
2. //IPad or homescreen or UIWebView
3. if (Ext.os.deviceType = = = ' Tablet ' | |! Ext.browser.is.Safari | | Window.navigator.standalone) {

(That's what ExtJs6 modern wrote)

So the height and width of the,<body> element and the Ext.viewport is 100%, not the fixed value px. Also shrinks as the webview shrinks.

[Cordova/phonegap] Cordova IOS App When a third-party input Method keyboard popup (click the input box), the page does not move up, resulting in the input box keyboard occlusion solution