【指令篇】键盘附着指令调整软键盘

用于解决软键盘遮挡输入框问题。 此指令非我原创的(原址不容易打开,我这说明整理一下),仅适用于ios,不过对于android来说没有大关系,因为android通过配置config.xml就能调整软键盘,如下:

    <preference name="Fullscreen" value="false" />
    <preference name="android-windowSoftInputMode" value="adjustPan" />

现在开始实现这个指令,新建指令之前添加Keyboard插件,一般我们的项目默认已经装上了的,我们只需安装相应的ionic-native子模块:

npm install @ionic-native/keyboard --save

然后创建指令:

ionic g directive keyboardAttach

然后打开文件,修改为:

import { Directive, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
import { Keyboard } from '@ionic-native/keyboard';
import { Content, Platform } from 'ionic-angular';
import { Subscription } from 'rxjs/Subscription';


/**
 * @name KeyboardAttachDirective
 * @source https://gist.github.com/Manduro/bc121fd39f21558df2a952b39e907754
 * @description
 * The `keyboardAttach` directive will cause an element to float above the
 * keyboard when the keyboard shows. Currently only supports the `ion-footer` element.
 * 
 * ### Notes
 * - This directive requires [Ionic Native](https://github.com/driftyco/ionic-native)
 * and the [Ionic Keyboard Plugin](https://github.com/driftyco/ionic-plugin-keyboard).
 * - Currently only tested to work on iOS.
 * - If there is an input in your footer, you will need to set
 *   `Keyboard.disableScroll(true)`.
 *
 * @usage
 *
 * ```html
 * <ion-content #content>
 * </ion-content>
 * 
 * <ion-footer [keyboardAttach]="content">
 *   <ion-toolbar>
 *     <ion-item>
 *       <ion-input></ion-input>
 *     </ion-item>
 *   </ion-toolbar>
 * </ion-footer>
 * ```
 */
@Directive({
  selector: '[keyboardAttach]' // Attribute selector
})
export class KeyboardAttachDirective implements OnInit, OnDestroy {
  @Input('keyboardAttach') content: Content;

  private onShowSubscription: Subscription;
  private onHideSubscription: Subscription;

  constructor(
    private elementRef: ElementRef,
    private keyboard: Keyboard,
    private platform: Platform
  ) {}

  ngOnInit() {
    if (this.platform.is('cordova') && this.platform.is('ios')) {
      this.onShowSubscription = this.keyboard.onKeyboardShow().subscribe(e => this.onShow(e));
      this.onHideSubscription = this.keyboard.onKeyboardHide().subscribe(() => this.onHide());
    }
  }

  ngOnDestroy() {
    if (this.onShowSubscription) {
      this.onShowSubscription.unsubscribe();
    }
    if (this.onHideSubscription) {
      this.onHideSubscription.unsubscribe();
    }
  }

  private onShow(e) {
    let keyboardHeight: number = e.keyboardHeight || (e.detail && e.detail.keyboardHeight);
    this.setElementPosition(keyboardHeight);
    // setTimeout(()=>{
    //         window.scrollTo(0, 0) ;
    //         this.content.scrollToBottom(0);
    //         this.keyboard.disableScroll(true);
    //     });
  };

  private onHide() {
    this.setElementPosition(0);
  };

  private setElementPosition(pixels: number) {
    this.elementRef.nativeElement.style.paddingBottom = pixels + 'px';
    this.content.resize();
  }
}

接着使用前记得在相应模块引入指令即可,如不使用懒加载的,就在app.module.ts里的declarations添加。

最后如指令里面的注释写的使用即可:

<ion-content #content>
</ion-content>
<ion-footer [keyboardAttach]="content">
  <ion-toolbar>
    <ion-item>
      <ion-input></ion-input>
    </ion-item>
  </ion-toolbar>
</ion-footer>

注:后来居然在文档config项发现下面这个(以前没有的),我还没去验证效果,有兴趣可试一下:

image.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Kiba518

【我们一起写框架】MVVM的WPF框架之绑定(二)

上一篇我们已经一起编写了框架的基础结构,并且实现了ViewModel反向控制Xaml窗体。

1292
来自专栏c#开发者

如何使用 Visual C# .NET 对 DataGrid Windows 控件执行分页

如何使用 Visual C# .NET 对 DataGrid Windows 控件执行分页 察看本文应用于的产品 文章编号 : 307710 最后修改...

37510
来自专栏c#开发者

Convert string to DateTime

如何使用 Visual C# .NET 对 DataGrid Windows 控件执行分页 察看本文应用于的产品 文章编号 : 307710 最后修改...

3749
来自专栏python学习之旅

python appium笔记(二):元素定位

#这里的示例是用android来说明的,xpath应该是通用的,resource-id不太清楚,没配过IOS的环境

2081
来自专栏张善友的专栏

Webix JavaScript UI 库可以帮你构建跨平台的HTML5 和 CSS3 程序

XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序...

2076
来自专栏葡萄城控件技术团队

在Silverlight中动态绑定页面报表(PageReport)的数据源

ActiveReports 7中引入了一种新的报表模型——PageReport(页面布局报表),这种报表模型又细分了两种具体显示形式: o    固定页面布局...

1899
来自专栏Lambda

Markdown

欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Mark...

2165
来自专栏林德熙的博客

win10 uwp 切换主题

一般我们的应用都要有多种颜色,一种是正常的白天颜色,一种是晚上的黑夜颜色,还需要一种辅助的高对比颜色。这是微软建议的,一般应用都要包含的颜色。

1721
来自专栏IMWeb前端团队

微型UI库Riot介绍

本文作者:IMWeb 黄龙 原文出处:IMWeb社区 未经同意,禁止转载 定义 Riot:类似 React 的微型 UI 库 特点: 自定义标签 快速...

2009
来自专栏数据之美

Fiddler 高级用法:Fiddler Script 与 HTTP 断点调试

之前在《关于 WEB/HTTP 调试利器 Fiddler 的一些技巧分享》中系统的介绍过 Fiddler 的原理与一些常见技巧,但那篇文章只是入门科普,并不深入...

7138

扫码关注云+社区

领取腾讯云代金券