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

我有一个类似的问题。 我通过将“模糊”事件侦听器功能延迟约100ms来解决此问题，以允许在模糊处理程序开始渲染之前触发另一个输入上的focus事件。