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 (.-keyCode e))
                          (println "ENTER")
                          (println "NOT ENTER")))}]

How to change the if condition so that enter keypresses can be distinguished from normal keys? All properties in e except target seem to be null.

Answer 1

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")))}]
   

Answer 2

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.