我正在尝试构建一个像 Google Docs 这样的应用程序,其中包含带有文本区域的网页以及更改我发布和更新到服务器的值,并从更新 DOM 的服务器取回保存的响应。
问题是稍后发生的 DOM 更新删除了用户需要继续输入的文本区域焦点。焦点丢失,用户必须再次单击文本区域才能获得焦点并继续输入。
当远程更改服务器上的值并将其发送到客户端时,如何解决失去焦点的问题。
最佳答案
您可以使用 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
,这样它就不会干扰其他页面。
关于javascript - 来自服务器的 Meteor 发布信息更改了 DOM 并删除了元素上的键盘焦点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21465138/