Backbone.js 如何自动聚焦第一个主干表单输入字段？

以下屏幕截图显示了用于登录和注册的组合表单：

以下模块用于呈现

AuthView

：

MyApp.module("User", function(User, App, Backbone, Marionette, $, _) {

  User.AuthView = Marionette.ItemView.extend({

    className: "reveal-modal",
    template: "user/auth",

    ui: {
      signInForm: "#signin-form",
      signUpForm: "#signup-form"
    },

    events: {
      "focus input": "onFocus"
    },

    onFocus: function() {
      console.log("Some input field has received focus.");
    },

    onRender: function() {  
      this.signInForm = new Backbone.Form({
        schema: {
          signInEmail: { 
            type: "Text", 
            title: "E-Mail address"
          },
          signInPassword: { 
            type: "Password", 
            title: "Password"
          }
        }
      }).render();
      this.ui.signInForm.prepend(this.signInForm.el);

      this.signUpForm = new Backbone.Form({
        schema: {
          signUpEmail: { 
            type: "Text", 
            title: "E-Mail address"
          },
          signUpPassword: { 
            type: "Password", 
            title: "Password"
          },
          signUpPasswordConfirmation: { 
            type: "Password", 
            title: "Password confirmation"
          }
        }
      }).render();
      this.ui.signUpForm.prepend(this.signUpForm.el);
    }

  });
});

如何在渲染时自动聚焦每个子窗体中的第一个字段？第一个字段是

signinfo表单的
signInEmail
，以及
signUpForm的
signUpEmail
我试着听
聚焦输入
事件。这样的事件是在我点击其中一个输入字段时触发的，而不是之前


同时，受当前答案的启发，我提出了以下帮助函数：

focusFirstFormField: function(form) {
  if (_.isUndefined(form)) {
    throw "IllegalStateException: Form is undefined."
  }
  // TODO: AuthView does not focus first sign-in field.
  var firstInput = form.find(':input:first');
  if (_.isObject(firstInput)) {
    if (firstInput.length > 0) {
      firstInput = firstInput[0];
    }
    else {
      throw "IllegalStateException: Form find returns an empty jQuery object."
    }
  }
  _.defer(function() {
    firstInput.focus();
  });
 }

不过，仍然需要改进。
事件对象是通常由用户触发的DOM事件，因此在本例中您可能不希望使用这些事件

如果我理解正确，您希望将焦点放在每个表单的第一个输入中，但由于您一次只能关注一件事情，并且它们一起呈现，因此您必须选择一个或另一个

最简单的选择是在onRender的末尾添加另一行，重点放在输入上。如果您的输入正在生成类似以下内容的输入：

<input type="text" name="signInEmail">

如果没有，您必须更改选择器。$（xxxx）.focus（）以适应。
您可以使用视图的
onDomRefresh
事件。它将在视图渲染和Dom刷新后触发

onDomRefresh: function() {
  this.focusFirstInput();
};

focusFirstInput: function() {
  this.$(':input:visible:enabled:first').focus();
};

此解决方案适用于一般情况。但是，如果使用引导，请注意。我在那里找不到这份工作。相反，我在字段中设置了
autofocus:“autofocus”
，它可以工作。
您可以将它添加到
onRender
方法中

this.ui.signInForm.find('input[type=text]:first').focus();
this.ui.signUpForm.find('input[type=text]:first').focus();

在
onRender
方法中，我执行以下操作：

$(this.el).find(':input[autofocus]').focus();

我将
autofocus=“
标志添加到我的HTML节点上。这适用于刷新。
Thx！我测试了这两种实现。注释第1部分：在
editoratrs
中设置
autofocus:“autofocus”
每个单独的表单
schema
在初始加载时可以正常工作，但在页面刷新时不能。此外，它不适用于更复杂的多页表单，我在其中来回导航，显示和隐藏单个子表单。注释第2部分：
onDomRefresh
对于设置页面重新加载的初始焦点非常有用。尽管如此，我还是想说我需要调用
.defer（）
来实现这一点。关于选择，我注意到，
：input:visible:enabled:first
对我来说无法重新加载页面。使用
：input:first
效果更好，尽管我对更复杂的表单有一些问题，它不选择第一个输入表单，而是选择另一个。@JJD，谢谢您的评论。对字段选择器使用
defer（）
既聪明又有用：），忽略
：visible
可能适用于您的情况。但是，如果表单是Rails样式的，那么首先需要注意它有隐藏的csrf字段。它适用于表单，但不适用于更复杂的表单，我可以在子表单之间来回导航。方法仍然+1，但我会选择更通用的方法。我更喜欢发布的更通用的选择方法，但仍然+1为我指明了正确的方向。
$(this.el).find(':input[autofocus]').focus();