CODEWITHSUNDEEP
clojurescriptreagent
Michiel de Mare
Michiel de Mare

Reputation: 42420

How To Detect "Enter" Keypress in Reagent?

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.

Upvotes: 15

Views: 5171

Answers (2)

deadghost
deadghost

Reputation: 5217

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.

Upvotes: 10

leetwinski
leetwinski

Reputation: 17859

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

Upvotes: 22

Related Questions