Elm - 現在のフォーカスをどのように検出するのですか

Question

Elmにはどのようにフォーカスしていますか？私はどのようにを設定するエルムに焦点を当てるが、現在フォーカスを持っているものを検出するための機能を見つけることができません。

Answer 1

elm-lang/domパッケージでは、IDを指定した要素にフォーカスを設定できますが、現在フォーカスされている要素を取得することはできません。これにはdocument.activeElementを使用できることがわかります。これを行うには、ポートを使用する必要があります。

ここには例があります。現在選択されているIDとすぐに作成されるテキストボックスのすべてのIDのリストを含むModelがあるとします。私たちが使用する

type alias Model = 
    { selected : Maybe String 
    , ids : List String 
    } 

のMSGがフォーカスを問い合わせると同様にフォーカスを設定するには、ドムライブラリを使用することができるようになります：

：そのために

type Msg 
    = NoOp 
    | FetchFocused 
    | FocusedFetched (Maybe String) 
    | Focus (Maybe String) 

、我々は2つのポートが必要になります現在document.activeElementについて報告するこれらのポートを呼び出す

port focusedFetched : (Maybe String -> msg) -> Sub msg 

port fetchFocused :() -> Cmd msg 

のjavascript：

var app = Elm.Main.fullscreen() 
app.ports.fetchFocused.subscribe(function() { 
    var id = document.activeElement ? document.activeElement.id : null; 
    app.ports.focusedFetched.send(id); 
}); 

ビューには現在選択されているIDが表示され、下の番号のついたテキストボックスの1つにフォーカスを合わせるボタンのリストが表示されます。

update機能はすべて一緒にそれを結び付け：ここ

update : Msg -> Model -> (Model, Cmd Msg) 
update msg model = 
    case msg of 
     NoOp -> 
      model ! [] 

     FetchFocused -> 
      model ! [ fetchFocused() ] 

     FocusedFetched selected -> 
      { model | selected = selected } ! [] 

     Focus (Just selected) -> 
      model ! [ Task.attempt (always NoOp) (Dom.focus selected), fetchFocused() ] 

     Focus Nothing -> 
      { model | selected = Nothing } ! [ fetchFocused() ] 

はworking example on ellie-app.comです。