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毫秒来解决它，以允许在模糊处理程序开始渲染之前触发另一个输入上的焦点事件。