在 purescript-halogen 中创建后自动聚焦输入元素

Question

我正在使用 purescript-halogen 构建一个类似电子表格的表格（类似于 Handsontable）。如果双击单元格，html 输入元素将呈现为相应表格单元格的子元素（并且不会为所有其他单元格呈现此类元素）。

这对于卤素来说效果非常好，只是我不知道如何自动将焦点设置到新创建的输入元素。

我尝试了

autofocus

属性，但这仅适用于双击的第一个单元格。 JavaScript 的方法是在新元素上调用

focus()

方法，但我不知道在halo 中更新 DOM 后如何调用它。有什么想法吗？

Answer 1

好的，这是我如何使用 Phil 的

Initializer

提示做到的：

编写一个真正聚焦元素的 JavaScript 函数。

exports.setFocusImpl = function(elemId) {
  return function() {
    document.getElementById(elemId).focus();
  };
};

FFI它。

foreign import data FOCUS :: !

foreign import setFocusImpl :: forall e. Fn1 String (Eff (focus :: FOCUS | e) Unit)

setFocus :: forall e. String -> Eff (focus :: FOCUS | e) Unit
setFocus = runFn1 setFocusImpl

然后在初始化器中使用

setFocus

函数。

H.input
[ A.id_ "inputField"
, A.Initializer do
    liftEff $ setFocus "inputField"
    pure DoNothing
] [ ]

请注意，我使用的是旧版本的halogen，其签名仍然是旧版本（30e8b2c7

中

Initializer的定义）。

Answer 2

这里描述的方法有点过时了。不需要写国外的焦点函数。它已存在于 Web.HTML.HTMLElement 库中。我在我的博客文章中描述了更新的方法：焦点输入元素