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事件。