javascript - 来自服务器的 Meteor 发布信息更改了 DOM 并删除了元素上的键盘焦点

Question

我正在尝试构建一个像 Google Docs 这样的应用程序，其中包含带有文本区域的网页以及更改我发布和更新到服务器的值，并从更新 DOM 的服务器取回保存的响应。

问题是稍后发生的 DOM 更新删除了用户需要继续输入的文本区域焦点。焦点丢失，用户必须再次单击文本区域才能获得焦点并继续输入。

当远程更改服务器上的值并将其发送到客户端时，如何解决失去焦点的问题。

Answer 1

您可以使用 session 变量和 rendered在您的模板上回调以执行此操作。这是一个使用带有一个文本区域的模板的非常简单的示例:

<template name="home">
  <textarea></textarea>
</template>

Template.home.events({
  'focus textarea': function() {
    Session.set('hasFocus', true);
  },
  'blur textarea': function() {
    Session.set('hasFocus', false);
  }
});

Template.home.rendered = function() {
  if (Session.get('hasFocus')) {
    $('textarea').focus();
  }
};

Template.home.destroyed = function() {
  return Session.set('hasFocus', undefined);
};

当您聚焦或模糊文本区域时，我们修改 session 变量hasFocus。每当模板被渲染时，我们只关注基于相同变量的文本区域。当我们完成模板后，只需清理 hasFocus，这样它就不会干扰其他页面。