如何设置焦点在Elm中的元素？

Question

如何将焦点设置在Elm中的Html元素上？我试图在元素上设置autofocus属性,它只将焦点设置在页面加载上.

Answer 1

的focus在功能榆树琅/ DOM包用于设置聚焦用Task(不使用任何portS或JavaScript的).

在内部,它用于requestAnimationFrame确保在尝试查找要关注的DOM节点之前呈现任何新的DOM更新.

使用示例:

type Msg
    = FocusOn String
    | FocusResult (Result Dom.Error ())

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        FocusOn id ->
            ( model, Dom.focus id |> Task.attempt FocusResult )

        FocusResult result ->
            -- handle success or failure here
            case result of
                Err (Dom.NotFound id) ->
                    -- unable to find dom 'id'
                Ok () ->
                    -- successfully focus the dom

在Ellie上的完整示例

Answer 2

解决方法是使用Mutation Observers.将此JavaScript插入主HTML页面或Elm代码的主视图中:

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    handleAutofocus(mutation.addedNodes);
  });
});
var target = document.querySelector('body > div');
var config = { childList: true, subtree: true };
observer.observe(target, config);

function handleAutofocus(nodeList) {
  for (var i = 0; i < nodeList.length; i++) {
    var node = nodeList[i];
    if (node instanceof Element && node.hasAttribute('data-autofocus')) {
      node.focus();
      break;
    } else {
      handleAutofocus(node.childNodes);
    }
  }
}

然后通过包含创建HTML元素Html.Attributes.attribute "data-autofocus" "".

Answer 3

使用 elm/html 0.19 您可以Html.Attrbutes autofocus将True

input [ onInput Code, autofocus True ] []