ionic3 监听软键盘的高度

最新推荐文章于 2020-08-15 23:52:22 发布

天渺工作室

最新推荐文章于 2020-08-15 23:52:22 发布

阅读量758

点赞数

CC 4.0 BY-SA版权

分类专栏： ionic3 文章标签： cordova ionic ionic3

本文链接：https://blog.youkuaiyun.com/sinat_37255207/article/details/88065590

ionic3 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在Ionic1和Ionic3中使用Cordova插件监听软键盘的显示和隐藏事件。通过示例代码展示了不同版本下事件监听的实现方式，包括使用addEventListener和RxJS的Observable进行事件绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ionic1 和普通cordova的大家都知道就是看ionic3 和4

https://blog.youkuaiyun.com/sean_css/article/details/70243893

ionic cordova plugin add ionic-plugin-keyboard

$ npm install --save @ionic-native/keyboard

经过本人测试这个方法 ionic1 ionic3 都可以用

ionic3 把方法写到构造器或者生命周期事件里面就行

ionic1里面的用法 addEventListener 这种这种写法在ionic3 的ts 中无法与外部变量通信应该是机制问题

//监听软键盘弹出

          window.addEventListener('native.keyboardshow', function (e:any) {



          //e.keyboardHeight 表示软件盘显示的时候的高度

          //alert(JSON.stringify(e))

          this.keyboardshowHeightBottom=e.keyboardHeight+'px';

        });

        //监听软键盘关闭

        window.addEventListener('native.keyboardhide', function (e) {



          //e.keyboardHeight 表示软件盘显示的时候的高度

          //alert(JSON.stringify(e))

          this.keyboardshowHeightBottom='0px';

        });

ionic3 里面的用法

//rxjs

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/observable/fromEvent';





Observable.fromEvent(window, "native.keyboardshow")

          .debounceTime(100)

          .subscribe((event: any) => {

              alert('显示:'+JSON.stringify(event))



              //this.keyboardshowHeightBottom=event.keyboardHeight+'px';

          });

          Observable.fromEvent(window, "native.keyboardhide")

          .debounceTime(100)

          .subscribe((event: any) => {

              //alert('关闭'+JSON.stringify(event))





          });