15

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.

Michiel de Mare
  • 41,982
  • 29
  • 103
  • 134

2 Answers2

22

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")))}]
leetwinski
  • 17,408
  • 2
  • 18
  • 42
10

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.

deadghost
  • 5,017
  • 3
  • 34
  • 46
  • 2
    This is great, didn't know about `.-key`. You can also save one character by using `js/console.log`. :^) – Harold Nov 01 '18 at 19:45