-
-
Save diarcastro/7f092622004a9d56c10cf2d48d05f78d to your computer and use it in GitHub Desktop.
| // Include it on your module's providers | |
| import { KeyboardProvider } from 'providers/keyboard/keyboard.ts' | |
| @NgModule({ | |
| providers: [ | |
| ... | |
| , KeyboardProvider | |
| ] | |
| }); | |
| // Inject on your page or component | |
| import { KeyboardProvider } from 'providers/keyboard/keyboard.ts' | |
| @IonicPage() | |
| @Component({ | |
| selector: 'my-page', | |
| templateUrl: 'my-page.html', | |
| }) | |
| export class MyPage { | |
| constructor(public keyboard: KeyboardProvider){ | |
| } | |
| } | |
| // Use the provider methods like this: | |
| this.keyboard.isVisible; // true or false | |
| this.keyboard.hide(); | |
| this.keyboard.show(); | |
| this.keyboard.keyboardWillShow().subscribe(event => { | |
| console.log('Keyboard is Visible'); | |
| }); | |
| this.keyboard.keyboardWillHide().subscribe( => { | |
| console.log('Keyboard is Hide'); | |
| }); | |
| // For more information read the file keyboard.ts or follow the plugin documentation on https://github.com/ionic-team/cordova-plugin-ionic-keyboard |
| /** | |
| * cordova-plugin-ionic-keyboard Provider | |
| * Diego Castro <ing.diegocastro@gmail.com> | |
| * | |
| */ | |
| import { Injectable, OnDestroy, OnInit } from '@angular/core'; | |
| import { Observable } from 'rxjs/Observable'; | |
| import { Subscription } from 'rxjs/Subscription'; | |
| interface IKeyboard { | |
| isVisible: boolean; | |
| hideFormAccessoryBar(value: boolean, successCallback?: Function); | |
| hide(); | |
| show(); | |
| } | |
| declare var Keyboard: IKeyboard; | |
| @Injectable() | |
| export class KeyboardProvider implements OnDestroy, OnInit { | |
| /** | |
| * Keyboard instance | |
| * | |
| * @private | |
| * @type {IKeyboard} | |
| * @memberof KeyboardProvider | |
| */ | |
| private _keyboard: IKeyboard; | |
| private _keyboardDidHide$: Observable<void> = null; | |
| private _keyboardDidShow$: Observable<KeyboardEvent> = null; | |
| private _keyboardWillShow$: Observable<KeyboardEvent> = null; | |
| private _keyboardWillHide$: Observable<void> = null; | |
| constructor() { | |
| this._keyboard = Keyboard; | |
| } | |
| ngOnInit() { | |
| } | |
| /** | |
| * Determine if the keyboard is visible | |
| * | |
| * @readonly | |
| * @type {boolean} | |
| * @memberof KeyboardProvider | |
| */ | |
| get isVisible(): boolean { | |
| return this._keyboard.isVisible; | |
| } | |
| /** | |
| * Hide the keyboard toolbar | |
| * @param value | |
| * @param successCallback | |
| */ | |
| hideFormAccessoryBar(value: boolean, successCallback?: Function) { | |
| this._keyboard.hideFormAccessoryBar(value, successCallback); | |
| } | |
| /** | |
| * Show the keyboard | |
| */ | |
| show() { | |
| this._keyboard.show(); | |
| } | |
| /** | |
| * Hide the keyboard | |
| * | |
| * @memberof KeyboardProvider | |
| */ | |
| hide() { | |
| this._keyboard.hide(); | |
| } | |
| /** | |
| * This event is fired when the keyboard is fully closed. | |
| * | |
| * @returns {Observable<void>} | |
| * @memberof KeyboardProvider | |
| */ | |
| keyboardDidHide(): Observable<void> { | |
| if (!this._keyboardDidHide$) { | |
| this._keyboardDidHide$ = Observable.fromEvent(window, 'keyboardDidHide'); | |
| } | |
| return this._keyboardDidHide$; | |
| } | |
| /** | |
| * This event is fired when the keyboard is fully open. | |
| * | |
| * @returns {Observable<KeyboardEvent>} | |
| * @memberof KeyboardProvider | |
| */ | |
| keyboardDidShow(): Observable<KeyboardEvent> { | |
| if (!this._keyboardDidShow$) { | |
| this._keyboardDidShow$ = Observable.fromEvent(window, 'keyboardDidShow'); | |
| } | |
| return this._keyboardDidShow$; | |
| } | |
| /** | |
| * This event is fired when the keyboard is fully closed. | |
| * | |
| * @returns {Observable<void>} | |
| * @memberof KeyboardProvider | |
| */ | |
| keyboardWillHide(): Observable<void> { | |
| if (!this._keyboardWillHide$) { | |
| this._keyboardWillHide$ = Observable.fromEvent(window, 'keyboardWillHide'); | |
| } | |
| return this._keyboardWillHide$; | |
| } | |
| /** | |
| * This event fires before keyboard will be shown. | |
| * | |
| * @returns {Observable<KeyboardEvent>} | |
| * @memberof KeyboardProvider | |
| */ | |
| keyboardWillShow(): Observable<KeyboardEvent> { | |
| if (!this._keyboardWillShow$) { | |
| this._keyboardWillShow$ = Observable.fromEvent(window, 'keyboardWillShow'); | |
| } | |
| return this._keyboardWillShow$; | |
| } | |
| ngOnDestroy() { | |
| } | |
| } |
constructor() {
if (!!(window as any).cordova) {
document.addEventListener('deviceready', () => {
this._keyboard = Keyboard;
}, true);
}
else {
this._keyboard = Keyboard;
}
}
It stills shows Keyboard is not defined, I don't see whats different after the else statement in your code provided as it stills gets:
this._keyboard = Keyboard;
Which brakes up. @lcaprini
The provider has no reference to cordova-plugin-ionic-keyboard. I expected to see an import at least?! And when I use it I have the same messages as the depricated plugin (which is not there anymore, I even wiped the node-modules, www and re-installed the platforms). If I call .show() in iOS I get : WARN: Showing keyboard not supported in iOS due to platform limitations in Xcode. Please tell me what I'm doing wrong.
I am more or less in same situation, so I decided to stick with the old (depreciated) ionic-plugin-keyboard.
I've posted an issue here, related to provider :
ionic-team/cordova-plugin-ionic-keyboard#9
They gave some 'workaround' :
danielsogl/awesome-cordova-plugins#2306
But it looks messy for me really.
Hi, I keep getting the this._keyboard.hideFormAccessoryBar is not a function error when using this example. Does anyone know what causes this/ how to fix this?
How can i get the keyboard height? I could not find any height value from KeyboardEvent?