Menu
I have a HTML5/Javascript (Sencha) app that I have packed into PhoneGap for iOS in XCode. One way or another, I want to be able to listen for the keyboard open/close events and do something accordingly. Is there any way to do this?
203
Keyboard will be automatically invoked while you are focusing textfield, textareafield ... . So you can create listener to the focus event in javascript which is similar to listening to the keyboard open event. Also you can use the blur listener to handle the keyboard close.
Thanks.
134
I've encountered the same issue, and I think that the best solution in your case is to use a PhoneGap plugin which will bind the native events, like this one :
https://github.com/driftyco/ionic-plugins-keyboard/tree/60b803617af49a10aff831099db90340e5bb654c
It works great on Android and iOS the same way, just bind those events:
window.addEventListener('native.showkeyboard', keyboardShowHandler);
window.addEventListener('native.hidekeyboard', keyboardHideHandler);
Recently I got stuck in a similar problem. After some research, I realized that 'Visual viewport Api' was the solution.
'The visual viewport is the visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area, or any other on-screen artifact that doesn't scale with the dimensions of a page'
https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API
window.visualViewport.addEventListener('resize', event => console.log(event.target));
Code above will be executed every time the 'visual viewport' is resized, for instance, when the keyboard opens/closes.
8
Triggering open status is easy using onclick or onfocus event, but on closing keyboard onblur event is not fired (because cursor remains in input/textarea). So I found solution by detecting window height which is significantly changed on keyboard open/close.
It is working in modern browsers on Android and iOS too. Demo: http://jsfiddle.net/qu1ssabq/3/
If necessary you can improve my code for devices which do not support addEventListener or innerHeight - there are available alternatives on the Internet.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui">
<title>Detect keyboard opened/closed event</title>
</head>
<body>
<textarea id="txta" onclick="xfocus()" onblur="xblur()"></textarea><br>
<span id="status" style="background: yellow; width: auto;">closed</span>
<script type="text/javascript">
function xfocus() {
setTimeout(function() {
height_old = window.innerHeight;
window.addEventListener('resize', xresize);
document.getElementById('status').innerHTML = 'opened'; // do something instead this
}, 500);
}
function xresize() {
height_new = window.innerHeight;
var diff = Math.abs(height_old - height_new);
var perc = Math.round((diff / height_old) * 100);
if (perc > 50)
xblur();
}
function xblur() {
window.removeEventListener('resize', xresize);
document.getElementById('status').innerHTML = 'closed'; // do something instead this
}
</script>
</body>
</html>
Another potential (but very hacky) solution is to watch the window resize event. It won't work for all use-cases, but on smartphones it's not so common to resize the window, so resize events are likely to come from the keyboard opening. This code is untested, but it illustrates the general idea:
let fullWindowHeight = window.innerHeight;
let keyboardIsProbablyOpen = false;
window.addEventListener("resize", function() {
if(window.innerHeight == fullWindowHeight) {
keyboardIsProbablyOpen = false;
} else if(window.innerHeight < fullWindowHeight*0.9) {
keyboardIsProbablyOpen = true;
}
});
Might be helpful to use alongside the focus/blur events to help (for example) detect the keyboard closing when the user presses the back button (as pointed out by @filipvkovic).
2
answered Nov 16 '22 05:11
As far as I can see this is only possible in the Android builds for PhoneGap, see the pull request here: https://github.com/phonegap/phonegap-android/issues/94.
The events are called hidekeyboard and showkeyboard. You might check whether they fire on iOS too.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
