elm - vaya - ¿Cómo manejar la tecla Enter presionar en el campo de entrada?

presionar tecla enter y que vaya al siguiente campo en c#

Question

Construí una aplicación sencilla para fines de aprendizaje y quiero poder enviar una acción cuando el usuario presiona la tecla Enter en el campo de entrada

view : Model -> Html Action
view model =
let
items = List.map (/ item -> li [] [ text item ]) model.items
in
div [] [
input [ onInput Change, value model.content ] [],
button [ onClick Add ] [ text "Submit" ],
ul [] items
]

Aquí está el código de vista. Espero que sea suficiente para explicar mi intención para ti. Lo que me gustaría tener es la capacidad de enviar alguna acción cuando el usuario presiona la tecla Enter mientras ingresa texto en el campo de entrada.

Answer 1

Hay una solución buena y directa para manejar onEnter en la versión Elm de TodoMVC :

onEnter : Msg -> Attribute Msg
onEnter msg =
let
isEnter code =
if code == 13 then
Json.succeed msg
else
Json.fail "not ENTER"
in
on "keydown" (Json.andThen isEnter keyCode)

Answer 2

Las respuestas anteriores fueron muy buenas, pero almacenar cada letra en el Model con cada pulsación de tecla no siempre es una buena idea.

Por ejemplo, en mi caso tengo un sistema de fileSystem como una estructura, y quiero editar cualquier nombre, no importa lo anidado que esté, con solo hacer doubbleclick . No puedo tener la vista del sistema de fileSystem agujeros reconstruida con cada pulsación de tecla . Es laggy

Descubrí que es mejor recibir el valor de entrada, solo cuando el usuario presiona Intro .

type Msg =
| EditingStarted
| EditingFinished String
| CancelEdit
input [ whenEnterPressed_ReceiveInputValue EditingFinished, whenEscPressed_CancelOperation CancelEdit, onBlur CancelEdit ] []
update msg model =
case msg of
EditingFinished inputValue ->
{ model | name = inputValue }
CancelEdit -> ...
whenEnterPressed_ReceiveInputValue : (String -> msg) -> H.Attribute msg
whenEnterPressed_ReceiveInputValue tagger =
let
isEnter code =
if code == 13 then
JD.succeed "Enter pressed"
else
JD.fail "is not enter - is this error shown anywhere?!"
decode_Enter =
JD.andThen isEnter E.keyCode
in
E.on "keydown" (JD.map2 (/key value -> tagger value) decode_Enter E.targetValue)
whenEscPressed_CancelOperation : msg -> H.Attribute msg
whenEscPressed_CancelOperation tagger =
let
isESC code =
if code == 27 then
JD.succeed "ESC pressed"
else
JD.fail "it''s not ESC"
decodeESC =
JD.andThen isESC E.keyCode
in
E.on "keydown" (JD.map (/key -> tagger) decodeESC)

Nota: Si está realizando una depuración de viaje en el tiempo, no verá aparecer cada letra tal como fue escrita. Pero todo el texto a la vez, porque solo había un mensaje. Dependiendo de lo que haga, esto puede ser un problema. Si no, disfruta :)

Answer 3

Me gustó la respuesta de Alon y la repetí un poco para crear un atributo que responde a <enter> y <esc>

onEscEnter : String -> (String -> msg) -> Attribute msg
onEscEnter originalValue tagger =
let
handleKey : Int -> Jdec.Decoder Int
handleKey code =
if L.member code [ 13, 27 ] then
-- ESC or Enter
Jdec.succeed code
else
Jdec.fail "something to ignore"
combiner : Int -> String -> msg
combiner keyCode tgtVal =
if keyCode == 13 then
tagger tgtVal
else if keyCode == 27 then
tagger originalValue
else
Debug.crash "onEscEnter"
keyCodeDecoder : Jdec.Decoder Int
keyCodeDecoder =
Jdec.andThen handleKey keyCode
in
on "keydown" (Jdec.map2 combiner keyCodeDecoder targetValue)

Answer 4

Podría usar algo como esto en su elemento de input , esto disparará el mensaje dado si se presiona la tecla Intro:

onEnterPressed : msg -> Attribute msg
onEnterPressed msg =
let
isEnter code =
if code == 13 then Ok () else Err ""
decodeEnterKeyCode = Json.customDecoder keyCode isEnter
in on "keydown" <| Json.map (/_ -> msg) decodeEnterKeyCode

Answer 5

Puede enlazar manualmente el evento keydown con el genérico on controlador. Elm actualmente no admite los controladores onKeyDown fuera de la caja, pero están planeados para el futuro.

Parece que la especificación se está alejando de event.keyCode y hacia event.key. Una vez que esto sea compatible con más navegadores, podemos agregar ayudantes aquí para onKeyUp, onKeyDown, onKeyPress, etc. ( Source )

Hasta entonces, simplemente puede escribir su propio controlador y usar el código de clave 13 (ingresar) para realizar sus acciones. Copie el siguiente código en elm-lang.org/try o abra https://runelm.io/c/pld para ver cómo funciona. Simplemente ingrese un poco de texto en el cuadro de entrada y presione intro para ver el estado actual reflejado en el div debajo del cuadro de entrada.

import Html exposing (text, div, input, Attribute)
import Html exposing (beginnerProgram)
import Html.Events exposing (on, keyCode, onInput)
import Json.Decode as Json
main =
beginnerProgram
{ model =
{ savedText = ""
, currentText = ""
}
, view = view
, update = update
}
view model =
div []
[ input [onKeyDown KeyDown, onInput Input] []
, div [] [ text ("Input: " ++ model.savedText) ]
]
onKeyDown : (Int -> msg) -> Attribute msg
onKeyDown tagger =
on "keydown" (Json.map tagger keyCode)
type Msg
= NoOp
| KeyDown Int
| Input String
update msg model =
case msg of
NoOp ->
model
KeyDown key ->
if key == 13 then
{ model | savedText = model.currentText }
else
model
Input text ->
{ model | currentText = text }

Answer 6

Si estás dispuesto a usar el paquete de la comunidad Html.Events.Extra package.elm-lang.org/packages/elm-community/html-extra/latest/… es muy fácil .

(Suponiendo que desea enviar el mensaje Add cuando se presiona la tecla Intro).

import Html.Events.Extra exposing (onEnter)
view : Model -> Html Action
view model =
let
items = List.map (/ item -> li [] [ text item ]) model.items
in
div [] [
input [ onInput Change, onEnter Add, value model.content ] [],
button [ onClick Add ] [ text "Submit" ],
ul [] items
]