Question

使用ClojureScript，当有人在文本字段中按enter并忽略其他键时，我试图采取行动。所以我需要能够区分不同的按键。

作为参考，我ns中的.cljs是：

(ns calculator.calculator
  (:require-macros [cljs.core.async.macros :refer [go]])
  (:require [goog.dom :as dom]
            [goog.events :as events]
            [cljs.core.async :refer [put! chan <!]]
            [clojure.string :as string]))

我的html有一个输入元素<input id="data-entry-box"></input>。我以这种方式设置了监听器：

(defn listen [el type]
  (let [out (chan)]
    (events/listen el type
                   (fn [e] (put! out e)))
    out))

(let [keypresses (listen (dom/getElement "data-entry-box") "keypress")]
  (go (while true
        (let [key-event (<! keypresses)
              char-code (.-charCode key-event)]
          (.log js/console (str "The character code is " char-code))
          (.log js/console (str "The key is " (.-key key-event)))
          (.log js/console (str "The event is " (.-event key-event)))
          (.log js/console (str "Or the event is " (:event key-event)))
          (if (= char-code
                 13)
            (handle-submit))))))

编译完成后，加载页面，然后按输入元素中的Enter，我在控制台中得到以下内容：

"The character code is 13"
"The key is "
"The event is "
"Or the event is "

这很好;我可以通过查找ASCII值来检查密钥是什么 - 但我不应该这样做。我想直接访问被按下的角色。

如果我设置断点，我可以看到它有.event属性，并且该属性还有一个属性.key。但出于某种原因，我无法访问它。

Answer 1

看一下捕鼠器代码 - https://github.com/ccampbell/mousetrap/blob/master/mousetrap.js

使用键码或将其手动映射到＆＃34;输入＆＃34;。

另外，我有一个很大的疑问，event_是一个共同的属性，你可以参考https://developer.mozilla.org/en-US/docs/Web/Events/keypress

Answer 2

按键上的属性实际上并不称为.event;它被称为.event_。请注意尾随下划线。因此，我们使用(.-event_ key-event)访问它，如下所示：

(let [keypresses (listen (dom/getElement "data-entry-box") "keypress")]
  (go (while true
        (let [key-event (<! keypresses)
              key-pressed (.-key (.-event_ key-event))]
          (.log js/console (str "The key pressed was " key-pressed))
          (if (= key-pressed
                 "Enter")
            (handle-submit))))))

此代码打印：＆＃34;按下的键是Enter＆＃34;。

请注意，javascript没有字符文字，因此(.-key (.-event_ key-event))返回的字符串为"Enter"。

如何使用通道访问ClojureScript中的按键事件属性？

2 个答案: