Javascript：将选定的焦点重置在正在重新渲染的元素上

Question

我使用dust.js 将Javascript 模板呈现为HTML。使用dust.js，我基本上将我的页面分解为模板组件，这些模板组件会根据某些事件重新呈现。一个这样的组件/模板在概念上如下所示：

[标签] [输入1] [输入2] [输入3]

此组件中的所有 3 个输入都有一个 onBlur 事件，用于重新计算其他输入的值，进而导致模板重新呈现。例如，如果用户修改了 Input1 的值，那么 Input2 和 Input3 的值都会被调整并重新渲染。

我重新渲染模板而不只是设置值的原因是模板包含根据值渲染的附加逻辑和元素（例如，某些值会导致呈现错误消息或附加字段正在显示）。

到目前为止一切顺利，但这会导致焦点问题。例如，如果用户修改了 Input1，然后单击 Input2。 onBlur 将触发，我将更新 Input2 和 Input3 的值，然后重新渲染模板。这反过来会导致用户的焦点被丢弃，他们将不得不再次点击 Input2。

我需要一种方法来知道用户点击了 Input2，以便在重新渲染完成后我可以将焦点设置到它。由于 onBlur 事件在 onFocus 之前触发，我想不出任何办法。

除了绕过模板渲染，还有什么解决办法吗？

Answer 1

我遇到了类似的问题。我通过将“模糊”事件侦听器函数延迟大约 100 毫秒来解决它，以允许在模糊处理程序开始渲染之前触发另一个输入上的焦点事件。