3

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

骨干形式

以下模块用于渲染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);
    }

  });
});

如何在呈现每个子表单时自动聚焦第一个字段？第一个字段将signInEmail用于signInForm和signUpEmail。 我试着听事件。当我单击其中一个输入字段时会触发此类事件，而不是之前。signUpForm
focus input

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

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

不过，仍然需要改进。

4

4 回答 4

6

events 对象是 DOM 事件，通常由用户触发，因此在这种情况下您可能不想使用它。

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

最简单的选择是在 onRender 的末尾添加另一行，重点关注输入。如果您的输入正在生成类似这样的输入：

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

然后你可以添加：

this.$('[name=signInEmail]').focus();

如果不是，您将不得不更改选择器 this.$(xxxx).focus() 以适应。

于 2013-12-08T22:49:53.863 回答
4

您可以使用onDomRefresh视图的事件。它将在视图渲染和 Dom 刷新后触发。

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

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

此解决方案适用于一般情况。但是，如果您使用的是 Bootstrap，请注意。我不能在那里完成这项工作。相反，我autofocus: 'autofocus'在现场设置并且它有效。

于 2013-12-09T02:24:22.167 回答
1

您可以将其添加到onRender方法中。

this.ui.signInForm.find('input[type=text]:first').focus();
this.ui.signUpForm.find('input[type=text]:first').focus();
于 2013-12-09T08:06:20.410 回答
1

关于onRender我做的方法：

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

我将autofocus=""标志添加到我的 HTML 节点上。这适用于刷新。

于 2016-10-31T13:23:58.500 回答