How to Listen for Keyboard Open/Close in JavaScript/Sencha

How to listen for keyboard open/close in Javascript/Sencha?

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.

How to detect keyboard close event in android device with javascript

I don't use Phonegap, but I did some rudimentary Google searches like 'phonegap android hide keyboard event' and came across these two relevant posts from a few months ago.

First one is right here on SO: Android SoftKeyboardDetect: Ignore this event what does it mean?. It looks like if you drop down to "native" Java(...) Android tries to make this available.

This other one, Re: [PhoneGap] Re: SoftKeyboardDetect(328): Ignore on a phonegap-oriented website seems to suggest that the phonegap implementation or the SoftKeyboardDetect code is to blame.

I have Android code written in Java where it works just fine.

jquery mobile how to detect if mobile virtual keyboard is opened

First jQuery Mobile does not have any pre-defined event handler for this case.
You will need to figure out the way yourself.

Android

When virtual keyboard is open, it fires windows resize event.
So you can check if the sum of windows width and height changed to detect keyboard is open or not.

iOS

This does not fire resize event, so simply bind focus and blur event as mentioned by @RamizWachtler

So I have some codes for your here:

You just add your own handling code into onKeyboardOnOff() function.

function onKeyboardOnOff(isOpen) {
    // Write down your handling code
    if (isOpen) {
        // keyboard is open
    } else {
        // keyboard is closed
    }
}

var originalPotion = false;
$(document).ready(function(){
    if (originalPotion === false) originalPotion = $(window).width() + $(window).height();
});

/**
 * Determine the mobile operating system.
 * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'.
 *
 * @returns {String}
 */
function getMobileOperatingSystem() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;

      // Windows Phone must come first because its UA also contains "Android"
    if (/windows phone/i.test(userAgent)) {
        return "winphone";
    }

    if (/android/i.test(userAgent)) {
        return "android";
    }

    // iOS detection from: http://stackoverflow.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "ios";
    }

    return "";
}

function applyAfterResize() {

    if (getMobileOperatingSystem() != 'ios') {
        if (originalPotion !== false) {
            var wasWithKeyboard = $('body').hasClass('view-withKeyboard');
            var nowWithKeyboard = false;

                var diff = Math.abs(originalPotion - ($(window).width() + $(window).height()));
                if (diff > 100) nowWithKeyboard = true;

            $('body').toggleClass('view-withKeyboard', nowWithKeyboard);
            if (wasWithKeyboard != nowWithKeyboard) {
                onKeyboardOnOff(nowWithKeyboard);
            }
        }
    }
}

$(document).on('focus blur', 'select, textarea, input[type=text], input[type=date], input[type=password], input[type=email], input[type=number]', function(e){
    var $obj = $(this);
    var nowWithKeyboard = (e.type == 'focusin');
    $('body').toggleClass('view-withKeyboard', nowWithKeyboard);
    onKeyboardOnOff(nowWithKeyboard);
});

$(window).on('resize orientationchange', function(){
    applyAfterResize();
});

Cordova Application - Event Listener for before keyboard show / open

Manage to change the keyboard by firing some javascript to get active element type and changes the keyboard type accordingly instead.

I can't seems to modify the keyboard type via UIKeyboardWillShowNotification event as it is too late.

Here is my code on changing the keyboard type based on active element type,

NSString* UITraitsClassString = [@[@"UI", @"Text", @"Input", @"Traits"] componentsJoinedByString:@""];

IMP newImp = imp_implementationWithBlock(^(id _s) {

    NSString *script = @"document.activeElement.type";
    NSString *type = @"";
    if ([self.webView isKindOfClass:[UIWebView class]]) {
        type = [(UIWebView*)self.webView stringByEvaluatingJavaScriptFromString:script];
    }

    if([type isEqualToString:@"text"]){
        return UIKeyboardTypeASCIICapable;
    } else if([type isEqualToString:@"tel"]){
        return UIKeyboardTypeASCIICapableNumberPad;
    }

    return UIKeyboardTypeDefault;
});

for (NSString* classString in @[UITraitsClassString]) {
    Class c = NSClassFromString(classString);
    Method m = class_getInstanceMethod(c, @selector(keyboardType));

    if (m != NULL) {
        method_setImplementation(m, newImp);
    } else {
        class_addMethod(c, @selector(keyboardType), newImp, "l@:");
    }
}

jQuery and Javascript - Detect when iPad keyboard is closed

As rightly commented by Andre, this is actually done via onblur, and it works completely fine.

How to capture the hide keyboard event on iOS using JavaScript

You can use the focusout event. It's like blur, but bubbles. It will fire when the keyboard closes (but also in other cases, of course). In Safari and Chrome the event can only be registered with addEventListener, not with legacy methods. Here is an example I used to restore a Phonegap app after keyboard dismissal.

 document.addEventListener('focusout', function(e) {window.scrollTo(0, 0)});

Without this snippet, the app container stayed in the up-scrolled position until page refresh.

How can I hide the Android keyboard using JavaScript?

What you need to do is create a new input field, append it to the body, focus it and the hide it using display:none. You will need to enclose these inside some setTimeouts unfortunately to make this work.

var field = document.createElement('input');
field.setAttribute('type', 'text');
document.body.appendChild(field);

setTimeout(function() {
    field.focus();
    setTimeout(function() {
        field.setAttribute('style', 'display:none;');
    }, 50);
}, 50);

Removing ExtJS default menu listeners

Finally, I have figured out how to resolve this issue. The way to remove the listener is to go to parent div component & call removeAllListeners() method on the element. The element can be accessed in the afterRenderHandler function using this.el & then calling this.el.parent().removeAllListeners() so that it removes the un-required listeners interfering with the user experience. You could call the parent method in a chained fashion if the listener identified is a nth level parent (call the method n times).

Ex: this.el.parent().parent().removeAllListeners().

You could also try to access the element directly if you have the ID by calling: var el = Ext.get('mainMenu'); & then calling el.removeAllListeners();

---

Related Topics