エルムのHTMLテキストエリアで、タブを押すと\ tが追加され、フォーカスが変わらない

Question

エルムのタブキーを聞く方法を知っています。そして、私はonWithOptionsを使用して変更されることからフォーカスを停止する方法を知っている：

textarea 
    [ onWithOptions "keydown" (Options False True) <| Decode.map KeyDown keyCode ] [] 

押しkeyCodeタブを表す、9だった場合、私はその後、私のupdate機能で、確認することができます。問題は現在、textareaのデフォルトの動作は機能しません。私が入力したものはtextareaには表示されません。簡単に言えば、私が入力したものをmodelに追加してtextareaの値をモデルにするだけです。今私はカーソルに問題があり、もっと重要なのは、クリップボードの貼り付けがうまくいかない...

エルムのtextareaで正しく動作するにはどうすればよいですか？通常は、Tabキーが押された場合にのみpreventDefault()を呼び出すことが理にかなっているようです。条件付きでElmのpreventDefault()に電話をかけることはできますか？

Answer 1

Elmは、Decoderを介して条件付きイベントの伝播をサポートします。単にあなたがあなたのupdate関数内に反応したいmapメッセージタイプ：その後、

succeededIfTabKey : Int -> Decode.Decoder Int 
succeededIfTabKey key = 
    if key == 9 then 
     Decode.succeed key 
    else 
     Decode.fail "non-tab" 

tabPressed : Decode.Decoder Msg 
tabPressed = 
    Decode.andThen succeededIfTabKey keyCode 
     |> Decode.map (always TabPressed) 

そして、あなたのinput要素のためのあなたの属性としてこれを使用します。

onWithOptions "keydown" { defaultOptions | preventDefault = True } tabPressed 

これは、すべての状況には適していません。​​のイベントをpreventDefault()とし、​​のイベントをpreventDefault()としたい場合は、運が悪いです。