Sencha Touch：如何以编程方式关注 ios 上的文本字段？答案

【问题标题】：Sencha Touch: How to programmatically focus on a textfield on ios?Sencha Touch：如何以编程方式关注 ios 上的文本字段？
【发布时间】：2013-09-23 20:31:54
【问题描述】：

我正在尝试进行类似于 ios 和 android 上的 pin 登录，其中用户必须输入 4 位 pin 才能继续。我遇到的问题是我希望在用户进入页面后立即选择输入并显示数字键盘，以便用户只需输入密码。

我检查了他们的文档，它显示文本字段是可聚焦的 http://docs.sencha.com/touch/2.2.1/#!/api/Ext.field.Text-event-focus，但人们一直遇到问题。

我正在使用 sencha CMD 编译我的代码并将其转换为原生应用程序。焦点在 android 设备上运行良好，但在 ios 设备上不起作用。

下面是一个简单的概念证明：

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();
                }
            }
        ]
    });
}
});

【问题讨论】：

我一直在努力解决这个特定问题，似乎移动 safari 不支持自动对焦。有一些关于该主题的讨论：discussions.apple.com/thread/4710766?start=15&tstart=0

标签： javascript ios extjs sencha-touch sencha-touch-2

【解决方案1】：

iOS Web 视图（自 iOS 6 起）默认情况下会阻止文本字段自动对焦，因为获取焦点也会显示键盘，显然会降低用户体验。有关详细信息，请参阅Apple's documentation。这会影响 Safari 以及本机应用程序中的 Web 视图。

如果您正在构建本机应用程序，则可以覆盖此行为。例如，如果您使用 Cordova 或 PhoneGap，您可以在项目的 MainViewController::webViewDidFinishLoad 方法中覆盖此设置：

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

    return [super webViewDidFinishLoad:theWebView];
}

还有其他几个关于这个主题的 SO 讨论：

【讨论】：

【解决方案2】：

我正在使用 Touch 2.4，并且能够通过这种方式使字段集中在浏览器中：

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

我需要跟进它在部署到设备时的工作原理。

【讨论】：

【解决方案3】：

试试这个...这里会出现文本框，焦点是输入数字..

<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>

【讨论】：