码迷,mamicode.com
首页 > 移动开发 > 详细

[Cordova/Phonegap] Cordova iOS 应用在第三方输入法的键盘弹出(点击输入框)时,页面不上移,导致输入框被键盘遮挡 的解决办法

时间:2018-03-14 10:42:43      阅读:528      评论:0      收藏:0      [点我收藏+]

标签:href   判断   data-   搜狗   view   tar   显示   pos   phonegap   

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

 

Cordova iOS应用在使用系统自带输入法键盘的时候,聚焦文本框是会将整体webview界面上移的,如下图:

技术分享图片

 

然而,如果你用的是第三方输入法(百度、搜狗、qq输入法等都是),聚焦文本框弹出键盘时,界面却不会整体上移,导致文本框被软键盘遮挡,如下图:

技术分享图片

不仅被遮挡,靠底部的文本框还无法往上拖拽滚至可视区域。

 

 

解决办法一:第三方键盘弹出,实现界面也能上移

使用 ionic-plugins-keyboard 插件,在键盘弹出时,使用js代码将整体界面上移

界面上移,其实是window.scrollY改变了,而第三方键盘弹出时window.scrollY是一直为0的

1、添加插件 https://github.com/driftyco/ionic-plugin-keyboard

2、监听 native.keyboardshow 键盘弹出事件,在键盘弹出时,执行window.scrollTo(0, 键盘高度),代码如下:

 

[javascript] view plain copy
 
  1. var isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //判断是iOS  
  2. if(isIOS) {   
  3.     function keyboardShowHandler(e){  
  4.         if(window.scrollY < 100) //键盘高度一般大于100,如果scrollY小于100,可以认为界面未上移,则需要手动上移  
  5.             window.scrollTo(0, e.keyboardHeight);  
  6.     }  
  7.     function keyboardHideHandler(e){  
  8.         if(window.scrollY != 0)  
  9.             window.scrollTo(0, 0);  
  10.     }  
  11.     window.addEventListener(‘native.keyboardshow‘, keyboardShowHandler);  
  12.     window.addEventListener(‘native.keyboardhide‘, keyboardHideHandler);  
  13. }  

 

优点:

  • 整体界面上移和iOS默认输入法键盘时的体验基本一致
  • 因为界面上移,文本框不会被键盘遮挡

 

缺点:

  • 假如你的Cordova应用有顶栏,顶栏可能会上移看不见
  • 虽然文本框不会被键盘遮挡,但是可能会上移到看不见的位置(比如点击的是靠顶部的文本框)

 

 

 

解决办法二:键盘弹出时,让webview高度收缩,类似安卓

使用 cordova-plugin-keyboard 插件,设置好插件提供的几个配置

1、添加插件:https://github.com/cjpearson/cordova-plugin-keyboard

2、在config.xml中加上2个配置(最好加在<platform name="ios">节点下)

 

[html] view plain copy
 
  1. <preference name="KeyboardShrinksView" value="true" />  
  2. <preference name="DisableScrollingWhenKeyboardShrinksView" value="true" />  

第一个配置就是:键盘弹出时收缩webview(类似安卓下的行为)
第二个配置就是:禁止iOS默认键盘弹出时的界面上移行为

 

3、可能你需要在点击文本框,键盘弹出后,处理一下把文本框滚动到可视区域内。

优点:

  • 高度收缩和安卓体验一致,顶栏不会随键盘出现而上移导致看不见

 

缺点:

 

假如你用的是 Sencha Touch,那么下面的内容很重要:

现象:

如果你用的是ExtJs6 Modern,KeyboardShrinksView设为true,app界面是会收缩的;但如果你用的是Sencha Touch,你会发现界面居然没有收缩(ios8+)。

 

主要原因:

Sencha Touch做的Cordova app在ios下,<body>元素和Ext.Viewport的高度height和宽度width是固定的,如下图:

技术分享图片

而ExtJs6 Modern做的Cordova app下则都是100%,如下图:

技术分享图片

导致的结果就是Sencha Touch下Ext.Viewport高度是固定的,并不会随着webview收缩而收缩。

 

解决办法:

打开文件MyApp\touch\src\viewport\Ios.js

 

[javascript] view plain copy
 
  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) {  

修改为

 

 

[javascript] view plain copy
 
  1. if (Ext.os.version.gtEq(‘7‘) && Ext.os.version.lt(‘8‘)) { //加上判断版本小于8的  
  2.         // iPad or Homescreen or UIWebView  
  3.         if (Ext.os.deviceType === ‘Tablet‘ || !Ext.browser.is.Safari || window.navigator.standalone) {  


(ExtJs6 Modern中就是这么写的)

 

这样,<body>元素和Ext.Viewport的高度和宽度就是100%,而不是固定值px了。也会随着webview收缩而收缩了。

[Cordova/Phonegap] Cordova iOS 应用在第三方输入法的键盘弹出(点击输入框)时,页面不上移,导致输入框被键盘遮挡 的解决办法

标签:href   判断   data-   搜狗   view   tar   显示   pos   phonegap   

原文地址:https://www.cnblogs.com/callmeguxi/p/8565576.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!