如何在 elm 的 text/input 框中自动显示 select/highlight 文本

Question

有没有办法在 elm 中做与 document.getElementById("test").select() 在 javascript 中做的相同的事情？

我有一个输入字段，当您在 Whosebug 上单击此处的共享时，我想以与突出显示共享 url 非常相似的方式操作：

即使是 github 上的内容，当您需要单击元素以突出显示它时也可以：

我知道如何使用端口 (eg.)。但我更愿意直接在 Elm 中进行。这可能吗？在 Elm 的未来版本中是否可能？

谢谢

Answer 1

目前在 elm-lang/dom, but they rely on native Javascript calls. See the focus example here.

有一个具有一些类似功能的包

Elm code:

focus : Id -> Task Error ()
focus =
  Native.Dom.focus

和本机代码...

function focus(id)
{
    return withNode(id, function(node) {
        node.focus();
        return _elm_lang$core$Native_Utils.Tuple0;
    });
}

如果你想构建一个不使用端口的本地包，你目前必须构建一个本地包，这可以工作，但将来可能不会向后兼容，而且你不会能够公开列出包。

我建议使用端口。

Answer 2

在 Elm 0.19 中，Browser.Dom 有一个 focus task that will focus the DOM element with a given id. This will put the cursor in the element (if it is editable), but it will not select the text (i.e. highlight it). For that, you would need JavaScript select()。据我所知，Elm 对此没有约束力，但这一定只是一种疏忽。这将非常容易添加 -- 几乎与焦点完全相同。

目前，如果您想要选择文本，端口是唯一的选择。

如何在 elm 的 text/input 框中自动显示 select/highlight 文本

How to auto select/highlight text in a text/input box in elm

elm