Sencha Touch: How to programmatically focus on a textfield on ios?

Question

I am trying to do a pin login similar to those found on ios and android, where the user must enter a 4 digit pin to continue. The problem I am having is that I want the input to be selected and the numberpad to be shown as soon as the user enters the page, so that the user can just enter their password.

I checked their documentation and it shows that the textfield is focusable http://docs.sencha.com/touch/2.2.1/#!/api/Ext.field.Text-event-focus but people have been having problems with it.

I am compiling my code using sencha CMD and converting it to a Native App. The focus works fine on android devices but it doesn't work on ios devices.

Below is a simple proof of concept:

Ext.application({
name : ('SF' || 'SenchaFiddle'),

launch : function() {
    Ext.create('Ext.Panel', {
        fullscreen : true,
        items:[
            {
                xtype: 'textfield',
                id: 'textfieldId'
            }, {
                xtype: 'button',
                text: 'click me to focus',
                handler: function () {
                    this.parent.down('#textfieldId').focus();
                }
            }
        ]
    });
}
});

Answer 1

iOS web views (since iOS 6) are designed to block text field autofocus by default since obtaining focus will also present the keyboard, apparently degrading the user experience. See Apple's documentation for more details. This affects Safari as well as web views in native applications.

If you're building a native application you can override this behavior. For example, if you're using Cordova or PhoneGap you can override this setting in your project's MainViewController::webViewDidFinishLoad method:

- (void)webViewDidFinishLoad:(UIWebView*)theWebView
{
    // Allow the keyboard to appear with Javascript focus events...
    theWebView.keyboardDisplayRequiresUserAction = false;

    return [super webViewDidFinishLoad:theWebView];
}

There are several other SO discussions that deal with this topic:

• Mobile Safari Autofocus text field
• Set textbox focus in mobile safari

Answer 2

I am using Touch 2.4 and was able to get the field to focus in the browser this way:

xtype: 'textfield',
label: 'Test Example',
name: 'testField',
listeners: [
    {
        fn: function(element, eOpts) {
            element.down('input').dom.focus();
        },
        event: 'painted'
    }
]

I will need to follow up with how this works when deployed to a device.

Answer 3

Try this...here the text box appears with a focus to enter digit..

<tpl  if="ItemKey==this.getChecked(values.ItemKey)">
                       <input  style="color:green;display:block;width:50px;text-align:center;" type="text"
                       id="{ItemKey}"
                       onkeyup="MyApp.app.getController(\'Control\').TextboxKeyUp(this)"
                       value={[this.getScore(values.ItemKey)]}
                        onfocus="MyApp.app.getController(\'Control\').patTextFocus(this)" ><tpl else>