1. #1
    Sencha User Eric Clapton's Avatar
    Join Date
    Jul 2011
    Posts
    11
    Vote Rating
    0
    Eric Clapton is on a distinguished road

      0  

    Question [Sencha Touch Android] show and hide keyboard with code ?

    [Sencha Touch Android] show and hide keyboard with code ?


    Hello,

    I'm developing an app with a screen that has TextAreaField inside.

    When user taps on textareafield virtual keyboard opens and if user never hits back button keyboard never hides.So keyboard is still on screen while user is navigating through other screens.

    My will is to hide the keyboard when user taps on anywhere outside virtual keyboard.(on the same textarea for instance)

    There should be some stable way to do this with Sencha Touch.

    Has anybody every used TextArea and faced a "keyboard hide" problem like this before?

    Any help will be appreciated.

  2. #2
    Touch Premium Member Philip Murphy's Avatar
    Join Date
    Oct 2011
    Location
    Dublin, Ireland
    Posts
    27
    Vote Rating
    1
    Philip Murphy is on a distinguished road

      0  

    Default Any solution to hiding Android keyboard with code?

    Any solution to hiding Android keyboard with code?


    Hi,

    Was wondering did you ever get a solution to this as I am facing the exact same problem. Seems incredible that such a basic thing is proving very difficult to find a solution to.

    Thanks in advance,

    Philip

  3. #3
    Sencha User Eric Clapton's Avatar
    Join Date
    Jul 2011
    Posts
    11
    Vote Rating
    0
    Eric Clapton is on a distinguished road

      0  

    Wink


    Hello,

    I was using phoneGap with Sencha Touch so I've done it using the following code.Maybe if you are using phoneGap try this:

    Code:
    public enum KeyBoard {
    
    
    INSTANCE;
    
    
        private WebView appView;
        private DroidGap mGap;
    
    
        public void showKeyBoard() {
            InputMethodManager mgr = (InputMethodManager) mGap
                    .getSystemService(Context.INPUT_METHOD_SERVICE);
            mgr.showSoftInput(appView, InputMethodManager.SHOW_IMPLICIT);
    
    
        }
    
    
        public void hideKeyBoard() {
            InputMethodManager mgr = (InputMethodManager) mGap
                    .getSystemService(Context.INPUT_METHOD_SERVICE);
            mgr.hideSoftInputFromWindow(appView.getWindowToken(), 0);
        }
    
    
    /**
         * @return the appView
         */
        public WebView getAppView() {
    returnappView;
        }
    
    
    /**
         * @param appView
         *            the appView to set
         */
        public void setAppView(WebView appView) {
            this.appView = appView;
        }
    
    
    /**
         * @return the mGap
         */
        public DroidGap getmGap() {
    returnmGap;
        }
    
    
    /**
         * @param mGap
         *            the mGap to set
         */
        public void setmGap(DroidGap mGap) {
            this.mGap = mGap;
        }
    
    
    }
    Last edited by Eric Clapton; 30 Oct 2011 at 11:08 PM. Reason: texting

  4. #4
    Touch Premium Member Philip Murphy's Avatar
    Join Date
    Oct 2011
    Location
    Dublin, Ireland
    Posts
    27
    Vote Rating
    1
    Philip Murphy is on a distinguished road

      0  

    Default


    Hi Eric,

    Thanks for the update, however, I'm not using PhoneGap, so I'm afraid I don't have access to it's JS-native bridge API.

    I've figured out the main issue I was having. It was very subtle indeed. The set up that I have is a separate panel, which is a child of a card layout component, with a text area field and form, so that a user can post a message. They have the opportunity to submit or cancel the message. It is most probable that the virtual keyboard will be open when the cancel or submit button is pressed. If either button is pressed the panel should disappear, the keyboard should be hidden, and they should be returned to the previous screen.

    On closing the panel when tapping the back button (i.e setActiveItem), thinking of being a good memory management citizen, I tried to destroy the panel that I was leaving. However, if you do this straight away the OS gets a bit confused and inadvertently fails to close the open virtual keyboard. The solution is to destroy the panel via a setTimeout call, so that the native OS keyboard code gets a moment to run. I've included an outline of the code I used to solve the problem as I'm sure this has caught a few more developers out (and it certainly took me a long time to figure out what on earth was going on).

    I've also included a work-around to the 'after' event on an animation being called twice.

    Code:
    myapp.views.InputPopupView = Ext.extend(Ext.Panel, {
    
    
        initComponent: function() {
            var me = this;
    
    
            this.dockedItems = [
            {
                xtype: 'toolbar',
                dock: 'top',
                defaults: {
                    scope: this
                },
                items: [
                    {
                        ui: 'default',
                        text: 'Cancel',
                        handler: this.showPreviousCard
                    },
                    {
                        xtype: 'spacer'
                    },
                    {
                        ui: 'confirm',
                        text: 'Save',
                        id: 'save-button',
                        handler: function() {
                            // Do something interesting here
    
                            this.showPreviousCard();
                        }
                    }
                ]
            }
            ];
    
    
            this.items = [
            {
                xtype : 'form',
                itemId: 'myForm',
                items: [
                    {
                        itemId: 'myTextArea',
                        xtype: 'textareafield',
                        name: "myValue",
                        placeHolder: "Enter your message",
                        listeners: {
                            afterrender : function(panel) {
                               this.el.down('textarea').setHeight((this.ownerCt.ownerCt.getHeight()/100*45)); // Set to 45% of screen height.
                            },
    
    
                            focus: function() {
                                window.scrollTo(0,1); // Force top-docked toolbar back into view. (was a problem on iPad)
                            }
                        }
                    }
                ]
                }
            ];
    
    
            myapp.views.InputPopupView.superclass.initComponent.apply(this, arguments);
        },
    
        showPreviousCard : function() {
            this.ownerCt.setActiveItem(this.prevCard, { // Example code assumes that parent is using a card layout.
                type: 'slide',
                direction: 'down',
                scope: this,
                after: function() {            
                    if(this.callSetActiveItemOnce === 0) { // Fix to stop method being called twice due to Sencha issue.
                        this.callSetActiveItemOnce++;
    
    
                        // Required to hide virtual keyboard. Do not do on Android as causes screen to jump after
                        // slide transition. (In my case the previous screen is a panel with scroll: 'vertical' set)
                        if(!Ext.is.Android) {
                            this.down('#myTextArea').blur();
                        }
    
    
                        // Allow virtual keyboard to disappear before destroying panel.
                        var me = this;
                        setTimeout(function() {
                            me.callSetActiveItemOnce = 0; // Fix to stop method being called twice due to Sencha issue.
                            me.destroy();
                        }, 500);
                   }
                }
            });
        },
    
        callSetActiveItemOnce: 0 // Fix to stop method being called twice due to Sencha issue.
    });
    Following CSS will ensure textareafield is displayed full width. I'm sure there must be a better way of doing this, but just including for completeness.

    Code:
    .x-form .x-panel-body {
        padding: 0;
    }
    Last edited by Philip Murphy; 3 Nov 2011 at 1:10 PM. Reason: Fix typo

  5. #5
    Sencha User msarath's Avatar
    Join Date
    Oct 2009
    Location
    Bangalore, IN
    Posts
    20
    Vote Rating
    1
    msarath is on a distinguished road

      0  

    Default show & hide keypad with code for iPhone

    show & hide keypad with code for iPhone


    Anybody has similar functional code for iPhone please?
    I am using sencha with phonegap. Please advice.

  6. #6
    Touch Premium Member Philip Murphy's Avatar
    Join Date
    Oct 2011
    Location
    Dublin, Ireland
    Posts
    27
    Vote Rating
    1
    Philip Murphy is on a distinguished road

      0  

    Default


    Here is a snippet that I'm using. The callback and scope are optional and may be omitted. The code assumes that you are in a text field or a text area. Works for web app, so might work for native as well. Let me know if it's of any use.

    Code:
        hideKeyboard: function(callback, scope) {
            var activeElement = document.activeElement;
            activeElement.setAttribute('readonly', 'readonly'); // Force keyboard to hide on input field.
            activeElement.setAttribute('disabled', 'true'); // Force keyboard to hide on textarea field.
            Ext.defer(function() {
                activeElement.blur();
                // Remove readonly attribute after keyboard is hidden.
                activeElement.removeAttribute('readonly');
                activeElement.removeAttribute('disabled');
                if(callback) {
                    callback.call(scope);
                }
            }, 100);
        }

  7. #7
    Sencha User
    Join Date
    Oct 2011
    Posts
    72
    Vote Rating
    3
    TDeBailleul is on a distinguished road

      0  

    Default That works fine

    That works fine


    Thanks for your answer, it works perfectly

  8. #8
    Sencha User
    Join Date
    Jun 2011
    Posts
    93
    Vote Rating
    3
    eyepoker is on a distinguished road

      2  

    Default


    have you guys tried just blurring the input element? works for me. Is there a need to do philip's method? seems like a lot if blur does the job.

    i.e., Ext.getCmp('componentID').blur();

  9. #9
    Sencha User
    Join Date
    Apr 2013
    Posts
    7
    Vote Rating
    0
    srikanthkamatam is on a distinguished road

      0  

    Default


    Thanks eyepoker & Philip...

    Both the answers works perfectly fine.

  10. #10
    Sencha User
    Join Date
    Oct 2013
    Posts
    3
    Vote Rating
    0
    syardumian is on a distinguished road

      0  

    Default


    Thank you! Philip, your answer works. Just what I needed. +1