2015-10-06 14 views
8

Dato il seguente codice:Come rilevare la pressione del tasto "Invio" nel reagente?

[:input {:type "text" 
      :value (:text @app-state) 
      :on-change (fn [e] 
         (if (= 31 (.-keyCode e)) 
          (println "ENTER") 
          (println "NOT ENTER")))}] 

Come cambiare la condizione if in modo che entrano pressione dei tasti possono essere distinte da tasti normali? Tutte le proprietà in e eccetto target sembrano essere nulle.

risposta

17

che è come risolvere il problema:

  1. si dovrebbe ascoltare :on-key-press (piuttosto che :on-change), perché "entrare" non si innesca :on-change evento (che ovviamente non cambia il testo)
  2. codice tasto per "entra" è , non
  3. uso charCode anziché keyCode (non un esperto js, ma keyCode non funziona per 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")))}] 
    
+2

Grazie, funziona! Sei favoloso! –

+2

'charCode' è deprecato,' key' è [consigliato] (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent). – Bill

1

Con key.

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

Interessante anche :on-key-up e :on-key-down.