Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
# cordova-plugin-ionic-keyboard
This plugin has been designed to work seamlessly with `cordova-plugin-ionic-webview`, so make sure you have it installed first:
- https://github.com/ionic-team/cordova-plugin-ionic-webview
- https://ionicframework.com/docs/wkwebview/
## Installation
```
cordova plugin add cordova-plugin-ionic-keyboard --save
```
## Preferences
### KeyboardResize
> Boolean (true by default)
#### Possible values
- `true`: Showing/hiding the keyboard will trigger some kind of resizing of the app (see KeyboardResizeMode)
- `false`: Web will not be resized when the keyboard shows up.
```xml
<preference name="KeyboardResize" value="true" />
```
### KeyboardResizeMode
> String ('native' by default)
#### Possible values
- `native`: The whole native webview will be resized when the keyboard shows/hides, it will affect the `vh` relative unit.
- `body`: Only the html `<body>` element will be resized. Relative units are not affected, because the viewport does not change.
- `ionic`: Only the html `ion-app` element will be resized. Only for ionic apps.
```xml
<preference name="KeyboardResizeMode" value="native" />
```
## Methods
### Keyboard.hideFormAccessoryBar
> Hide the keyboard toolbar.
Set to true to hide the additional toolbar that is on top of the keyboard. This toolbar features the Prev, Next, and Done buttons.
```js
Keyboard.hideFormAccessoryBar(value, successCallback);
```
##### Quick Example
```js
Keyboard.hideFormAccessoryBar(true);
Keyboard.hideFormAccessoryBar(false);
Keyboard.hideFormAccessoryBar(null, (currentValue) => { console.log(currentValue); });
```
### Keyboard.hide
> Hide the keyboard
Call this method to hide the keyboard
```js
Keyboard.hide();
```
### Keyboard.show
> Show the keyboard
Call this method to show the keyboard.
```js
Keyboard.show();
```
## Properties
### Keyboard.isVisible
> Determine if the keyboard is visible.
Read this property to determine if the keyboard is visible.
```js
if (Keyboard.isVisible) {
// do something
}
```
## Events
### keyboardDidHide
> This event is fired when the keyboard is fully closed.
Attach handler to this event to be able to receive notification when keyboard is closed.
```js
window.addEventListener('keyboardDidHide', () => {
// Describe your logic which will be run each time keyboard is closed.
});
```
### keyboardDidShow
> This event is fired when the keyboard is fully open.
Attach handler to this event to be able to receive notification when keyboard is opened.
```js
window.addEventListener('keyboardDidShow', (event) => {
// Describe your logic which will be run each time when keyboard is about to be shown.
console.log(event.keyboardHeight);
});
```
### keyboardWillShow
> This event fires before keyboard will be shown.
Attach handler to this event to be able to receive notification when keyboard is about to be shown on the screen.
```js
window.addEventListener('keyboardWillShow', (event) => {
// Describe your logic which will be run each time when keyboard is about to be shown.
console.log(event.keyboardHeight);
});
```
### keyboardWillHide
> This event is fired when the keyboard is fully closed.
Attach handler to this event to be able to receive notification when keyboard is about to be closed.
```js
window.addEventListener('keyboardWillHide', () => {
// Describe your logic which will be run each time when keyboard is about to be closed.
});
```