Sencha Touch:如何以编程方式专注于ios上的文本字段

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

本文关键字:ios 字段 文本 专注 方式 Touch 编程 Sencha      更新时间:2023-09-26

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

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

我正在使用 sencha CMD 编译我的代码并将其转换为本机应用程序。该焦点在安卓设备上工作正常,但在 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();
                }
            }
        ]
    });
}
});
iOS

Web 视图(从 iOS 6 开始)默认设置为阻止文本字段自动对焦,因为获得焦点也会显示键盘,显然会降低用户体验。有关更多详细信息,请参阅 Apple 的文档。这会影响 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 讨论涉及此主题:

  • 移动版 Safari 自动对焦文本字段
  • 在移动野生动物园中设置文本框焦点

我正在使用 Touch 2.4,并且能够以这种方式让字段在浏览器中聚焦:

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

我将需要跟进部署到设备时的工作方式。

试试这个...此处出现文本框,焦点用于输入数字。

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