Question

Meteor的新手并感谢任何帮助 - 一直在努力解决这个问题。所以我有一个有条件地绘制的模板：

{{#if creating}}
    <form class="form-create"> 
     <input name="name" type="text" id="mainInput">
     <button type="submit">Submit</button>
     <a class="cancel" href="#">Cancel</a>
     </form>
 {{else}}
   <a class="create" href="#">Create</a>
  {{/if}}

工作得很好 - 点击锚链接通过“创建”会话反应变量召唤表单，取消表单再次召唤锚点。

我的问题是当表单出现时，我想将输入（#mainInput）设置为焦点。现在这个代码可以工作，如果我将它连接到一个按钮或其他东西（它设置输入聚焦所以我知道jquery工作 - 例如：

 "click .focusBtn": function(e, tpl) {

   tpl.$("#mainInput").focus();
   tpl.$("#mainInput").select(); //might as well select the entire thing too

}，

但是，我不能把这个焦点集中在从锚点到表格的屏幕重绘上“关注”！

我已尝试在会话变量（Creating）代码中将其挂起 - 这样每次创建都会更改（console.log我看到Creating switch从true变为false，我验证Creating为true，从中调用焦点帮助块，但没有变化）

我也尝试过会话var创建的跟踪器 - 就像这样，无济于事，没有实现焦点：

Tracker.autorun(function () {
  var creating = Session.get('creating');
  console.log('Autorun is auto-running!');
  console.log(creating); 

  if (creating) {
       $('#mainInput').focus(); // I tried documentbyID, etc but nothing
  }
});

我意识到它可能与Tracker有关，或者可能有一个我不知道的“钩子”（我试过渲染模板，但这似乎只适用于初始创建，一次）我正在阅读现在指导，但仍然是新的，任何帮助/指导表示赞赏。谢谢！

Answer 1

您走在正确的轨道上，当Meteor有机会在Tracker.afterFlush变量之后呈现输入时，您只需要使用focus回调注册来执行Session调用已失效，并且选择了空格键{{#if}}阻止辅助路径。

Tracker.autorun(function () {
  var creating = Session.get('creating');   
  if (creating) {
    Tracker.afterFlush(function(){
      $('#mainInput').focus();
    });
  }
});

Answer 2

尝试添加自动对焦

<input name="name" type="text" id="mainInput" autofocus>

Meteor.js - 将焦点设置为在模板重构时形成输入字段

2 个答案: