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

Posted 2023-02-22

【中文标题】在 purescript-halogen 中创建后自动聚焦输入元素

【英文标题】：Automatically focus input element after creation in purescript-halogen

【发布时间】：2015-11-21 19:26:57

【问题描述】：

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

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

我尝试了autofocus 属性，但这仅适用于双击的第一个单元格。执行此操作的 javascript 方法是在新元素上调用 focus() 方法，但我不知道在卤素更新 DOM 后如何调用它。有什么想法吗？

【问题讨论】：

也许您想使用“初始化程序”？新版本中的函数签名发生了变化，但是如果您在文档/示例中查找该名称，您应该会找到它。

【参考方案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
] [ ]

请注意，我使用的是旧版本的卤素，其中签名仍然是旧版本 (definition of Initializer in 30e8b2c7)。

【讨论】：

此解决方案需要为节点分配 id，这会使具有多个副本的动态接口复杂化。不保留隔离。