Как настроить фокус на элементе Html в Elm? Я попытался установить атрибут автофокуса на элемент, и он устанавливает фокус на загрузку страницы.
Как установить фокус на элемент в Elm?
Ответ 1
Функция focus
в пакете elm-lang/dom используется для установки фокуса с помощью Task
(без использования каких-либо port
или JavaScript).
Внутри он использует requestAnimationFrame
, чтобы обеспечить рендеринг любых новых обновлений DOM, прежде чем он попытается найти DOM node для фокусировки.
Пример использования:
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
Ответ 2
Обходной путь для этого - использовать Наблюдатели мутаций. Вставьте этот 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" ""
.
Ответ 3
Я потратил немало времени на изучение этого недавно. К сожалению, я не думаю, что это возможно с существующей библиотекой elm-html
. Тем не менее, я придумал хак, который использует анимацию css для запуска события и встраивания в чистые js.
Вот мой взломать в Вяз, используя script
node и style
node. Это очень уродливо, на мой взгляд.
import Html exposing (div, button, text, input, node)
import Html.Events exposing (onClick)
import Html.Attributes exposing (type', class)
import StartApp.Simple
main =
StartApp.Simple.start { model = model, view = view, update = update }
model = []
view address model =
-- View now starts with a <style> and <script> (hacky)
(node "style" [] [ Html.text style ]) ::
(node "script" [] [Html.text script ]) ::
(button [ onClick address AddInput ] [ text "Add Input" ]) ::
model |>
div []
type Action = AddInput
update action model =
case action of
AddInput -> (Html.p [] [input [type' "text", class "focus"] []]) :: model
-- Use pure string css (hacky)
style = """
.focus {
animation-name: set-focus;
animation-duration: 0.001s;
-webkit-animation-name: set-focus;
-webkit-animation-duration: 0.001s;
}
@-webkit-keyframes set-focus {
0% {color: #fff}
}
@keyframes set-focus {
0% {color: #fff}
}
"""
-- Cheating by embedding pure javascript... (hacky)
script = """
var insertListener = function(event){
if (event.animationName == "set-focus") {
event.target.focus();
}
}
document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari
"""