How To Detect “Enter” Keypress in Reagent?

Question

Given the following code:

  [:input {:type \"text\"
           :value (:text @app-state)
           :on-change (fn [e]
                        (if (= 31 (.-keyCo         


        

Answer 1

With key.

[:input
 {:on-key-press
  (fn [e]
    (if (= (.-key e) "Enter")
      (.log js/console "Enter")
      (.log js/console "Not Enter")))}]

Also of interest is :on-key-up and :on-key-down.

Answer 2

that's how to fix it:

1. you should listen to :on-key-press (rather than :on-change), because "enter" doesn't trigger :on-change event (it obviously doesn't change the text)
2. key code for "enter" is 13, not 31

3. use charCode instead of keyCode (not an expert in js, but keyCode doesn't work for me in firefox)

   [:input {:type "text"
            :value (:text @app-state)
            :on-key-press (fn [e]
                            (println "key press" (.-charCode e))
                            (if (= 13 (.-charCode e))
                              (println "ENTER")
                              (println "NOT ENTER")))}]