[英]Automatically focus input element after creation in purescript-halogen
I'm using purescript-halogen to build a spreadsheet-like table (similar to Handsontable ). 我正在使用purescript-halogen建立类似电子表格的表格(类似于Handsontable )。 If you double-click a cell, an html input element is rendered as a child of the respective table cell (and no such element is rendered for all the other cells). 如果双击某个单元格,则html input元素将作为相应表单元格的子级呈现(并且对于所有其他单元格均不呈现此类元素)。
This works really well with halogen, except that I don't know how to automatically set the focus to the newly created input element. 这对卤素灯非常有效,除了我不知道如何自动将焦点设置到新创建的输入元素上。
I tried the autofocus
attribute, but this only works for the first cell that is double-clicked. 我尝试了autofocus
属性,但这仅适用于双击的第一个单元格。 The JavaScript way to do it is by calling the focus()
method on the new element, but I don't know how to call it after the DOM has been updated in halogen. JavaScript的实现方法是在新元素上调用focus()
方法,但在DOM更新了卤素之后,我不知道如何调用它。 Any ideas? 有任何想法吗?
Ok, here is how I did it using Phil's Initializer
hint: 好的,这是我使用Phil的Initializer
提示进行的操作:
Write a JavaScript function that actually focuses the element. 编写一个实际上使元素聚焦的JavaScript函数。
exports.setFocusImpl = function(elemId) {
return function() {
document.getElementById(elemId).focus();
};
};
FFI it. 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
And then use the setFocus
function in the initializer. 然后在初始化程序中使用setFocus
函数。
H.input
[ A.id_ "inputField"
, A.Initializer do
liftEff $ setFocus "inputField"
pure DoNothing
] [ ]
Note that I'm using an old version of halogen where the signature is still the old one ( definition of Initializer
in 30e8b2c7 ). 请注意,我使用的是卤素的旧版本,但签名仍然是旧版本( 30e8b2c7中Initializer
定义 )。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.