3

テンキーのキーアップとキーダウンのイベントが異なるキー値を返す理由を誰かが明らかにすることはできますか?

このことを考慮：

<input type="text" />
<script>
    document.getElement('input').addEvents({
    'keydown':function(e){
            console.log('keydown: code:' + e.code + ', key:' + e.key);
    },
    'keyup':function(e){
            console.log('keyup  : code:' + e.code + ', key:' + e.key + '\n');
        }
    });
</script>

各イベントがキーダウンとキーアップの両方で同じキー値を返すことを期待していましたが、代わりに以下の出力が得られました (0、1、2、8、および 9 を押した後)。

キーダウン: コード:96、キー:0 キー
アップ: コード:96、キー:`

キーダウン: コード:97、キー:1 キー
アップ: コード:97、キー:a

キーダウン: コード:98、キー:2 キー
アップ: コード:98、キー:b

キーダウン: コード:104、キー:8 キー
アップ: コード:104、キー:h

キーダウン: コード:105、キー:9 キー
アップ: コード:105、キー:i

通常、私はキープレスを使用するので、問題はありませんでした。対応するテンキーキーがキーボードで押されたときに画面上のテンキーの代表的なボタンを強調表示すると、これに遭遇しました（下で強調表示し、上で強調表示を削除します）。

何か案は？

4

2 に答える 2

2

さまざまなブラウザーが keydown、keypress、keyup イベントを実装する方法には大きな混乱があり、keydown および keyup イベントの keyCode 値でさえブラウザー間で標準化されていません。

現在、イベント オブジェクトには、押されたキーに関する情報を含む 3 つのプロパティがあります。

  • charCode - 押された文字キーの Unicode 値
  • keyCode - ユーザーが押したキーを表す数値
  • which - 押された英数字キーの keyCode または charCode 番号

押されたキーの値は、keyCode または charCode プロパティのいずれかに格納されますが、両方には格納されません。keyCode は常に keydown イベントと keyup イベントで設定され、charCode は keypress イベントで設定されます。

たとえば、「e」を押すと、次のようになります。

  • keydown および keyup レポート:
    • charCode=0, keyCode=69, which=69 - 数字 69 の文字は大文字の E
  • キープレス レポート:
    • charCode=101, keyCode=0, which=101 - 101 番の文字は小文字の e

テンキーで 9 を押すと、次のようになります。

  • keydown および keyup レポート:
    • charCode=0, keyCode=105, which=105 - 105 番の文字は小文字の i
  • キープレス レポート:
    • charCode=57, keyCode=0, which=57 - 数字 57 の文字は数字の 9 です

ムーツール

Mootools は、event.code および event.key プロパティを追加することで標準化を試みます。

event.code = event.which || event.keyCode;
event.key = String.fromCharCode(code).toLowerCase();

また、テンキーの数字のキーコードも変換しますが、キーダウン イベント (バージョン 1.4.5) のみであり、キーアップは変換しません。これが意図的かどうかはわかりませんが、次の 1163 行を置き換えることで、keyup イベントを簡単に変更して同じ動作にすることができますmootools-core-1.4.5-full-nocompat.js。

if (type == 'keydown') {

に：

if (type == 'keydown' || type == 'keyup') {

そうすれば、keyup イベントの keyCodes も変換されます。

興味深いことに、Mozilla Developer Networkは次のように述べています。

「charCode」、「keyCode」、および「which」は非推奨です。使用可能な場合は、代わりに「char」または「key」を使用してください。

しかし、Firefox や Chrome での実装はまだ見当たりません。また、jQuery はイベント オブジェクトに「キー」プロパティを追加しますが、常に「未定義」です (おそらくブラウザの実装に依存します)。

于 2013-06-06T19:46:52.780 に答える